百网思正是上线了。欢迎围观

弹性display: flex布局自看笔记

js ynlmq 3297浏览 0评论

基础概念

块级元素默认的display 属性都是block 状态,而当给块级元素display 属性加上flex值,flex 布局就被创建 比如div 直接设置 display:flex,这时候当div被称为 flex 容器,里面的子项元素称之为 flex 子项

flex 容器布局也叫弹性布局的诞生,单靠一个属性值,无法满足布局需求,因此为满足布局需求,还需要围绕flex 布局而产生的相关属性,而这些相关属性恰好分为两部分 一部分作用与flex 容器;另一部分作用域flex子项

点击下面链接快速索引

作用于flex容器属性

flex-direction 容器内项目的排列方向(默认横向排列)

flex-wrap  容器内项目换行方式

flex-flow 以上两个属性的简写方式

justify-content 项目在主轴上的对齐方式

align-items 项目在交叉轴上如何对齐

align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

作用于flex子项属性

order 项目的排列顺序。数值越小,排列越靠前,默认为0

flex-grow 项目的放大比例,默认为0,即如果存在剩余空间,也不放大

flex-shrink  项目的缩小比例,默认为1,即如果空间不足,该项目将缩小

flex-basis  在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小

flex  是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选

align-self  允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

小提示 不管是作用在flex容器还是flex子项上,最终都是通过flex子项内容展现出来,需要区别的是一个是作用整体一个是作用具体的单个

flex 概念还有一个内容叫排序: 通过主轴(main axis)和交叉轴(cross axis) 默认情况下,主轴和x轴相同,交叉轴和y轴相同。弹性盒子默认会按主轴x轴排列,看上去的表现形式就是从浏览器的左边到右边排序;

友情提示 设为Flex布局以后,子元素的float、clear和vertical-align属性将失效

本篇测试属性的笔记HTML结构都是基于如下结构

<div class="container"> <!--  flex 容器-->
   <div><!--  flex 子项-->
     <img src="./images/1.jpg">
   </div>
   <div><!--  flex 子项-->
     <img src="./images/2.jpg">
   </div>
   <div><!--  flex 子项-->
     <img src="./images/3.jpg">
   </div>
 </div>

同时为了清晰的看到排序问题图片上标注了顺序,当然美女图片也比较养眼;

作用在flex 容器的css属性

flex-direction

容器子项目的排列方向(默认从左到右排序),可以从上倒下,从下到上,从左到右,从右到左;

语法

flex-direction: row | row-reverse | column | column-reverse;

参数

row 默认值 水平排序 方向从左到右
row-reverse 水平排序 方向从右到坐 和 row相反
column 垂直排序 方向从上倒下
column-reverse 垂直排序 方向从下倒上 和column 相反

row 这个属性可以不用写,只要是flex容器自动出发就是这个

.container{
      display:flex;
      /* 默认值可以写或者不写*/
      flex-direction:row;
    }

效果

在这里插入图片描述

row-reverse

.container{
      display:flex;
      flex-direction:row-reverse;
    }

效果

在这里插入图片描述

column

.container{
      display:flex;
      flex-direction:column;
    }

效果

在这里插入图片描述

column-reverse 效果

在这里插入图片描述

flex-wrap

容器控制子项布局是否换行,默认单行显示不换行

语法

   flex-wrap: nowrap | wrap | wrap-reverse;

参数

nowrap 默认值 不换行 单行显示
wrap 宽度不足换行显示换行 从左到右,从上到下
wrap-reverse 宽度不足换行显示 换行 但是 排序是从下往上,从左到右,实际项目很少用

示例:

nowrap 默认值不换行,在渲染的时候很容易出现溢出;

.container{
   display:flex;
    flex-wrap: nowrap;
  }

效果

溢出 在这里插入图片描述

小知识点:如何不换行且不溢出?,即让自动无限缩小内容

可以让图片自适应 子项的宽带,在flex中子项的宽度可以无限小,因为没有定义子项宽度

.container{
      display:flex;
      flex-wrap:nowrap;
    }
    .container img{
      max-width: 100%;
    }

效果

可以看到图片小了很多

在这里插入图片描述

wrap效果

在这里插入图片描述

wrap-reverse效果

在这里插入图片描述

flex-flow

flex-direction和flex-wrap的缩写 默认是row nowrap 中间用空格隔开

语法

 flex-flow: <flex-direction> || <flex-wrap>;

从右到左换行效果

复合写法

    .container{
      display:flex;
      flex-flow: row-reverse  wrap;
    }

在这里插入图片描述

justify-content

flex容器控制内容 在主轴的对齐和分布方式,主轴是通过 flex-direction 确定那个方向 默认往左对齐

语法

justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;

参数

flex-start 默认值 依据主轴对方向往左对齐或者从上开始对齐(基本不用)
flex-end 依据主轴对方向往右对齐或者从下开始对齐(基本不用)
center 依据主轴居中对齐
space-between 依据主轴居两端对齐
space-around 每个项目两侧的间隔相等。所以,子项目之间的间隔比项目与边框的间隔大一倍,有点像margin和padding这种对左右边距对味道
space-evenly 每个flex子项两侧空白间距完全相等

示例效果 说明主轴统一取默认值 flex-direction:row;水平方向,实际中用对最多对也是这个

示例:

flex-end

.container{
      display:flex;
      justify-content:flex-end;
    }

示例效果

在这里插入图片描述

center 效果

在这里插入图片描述 space-between效果

在这里插入图片描述

space-around 效果

在这里插入图片描述

space-evenly 效果

在这里插入图片描述

align-items

说的是flex子项们依据交叉轴对对齐方式 所有子项目们约着一起向某个地方对象,一起向上对齐,一起向下对齐 语法

align-items: stretch | flex-start | flex-end | center | baseline;

参数

stretch 默认值 子项目被拉升对齐 上下对齐,如果定义高度则按照height计算
flex-start 与主轴方向相关。默认表现为容器顶部对齐
flex-end 与主轴方向相关。默认表现为容器底部对齐
center 表现为垂直居中对齐。
baseline 表现为所有flex子项都相对于flex容器的基线齐。

示例 stretch

.container{
      display:flex;
      align-items: stretch;
    }

效果

在这里插入图片描述

注意到这里到子项,背景是颜色展示到就是子项,是被拉升了。和最高到子项一样高, 定义子项高度就依据子项的最高来对齐,容器高度的变化也跟着最高的变化。

    .container div{
      height: 50px;
    }
    .container div:nth-child(1){
      height: 60px;
    }

在这里插入图片描述

flex-start 效果

在这里插入图片描述

flex-end效果 在这里插入图片描述

center 效果 在这里插入图片描述

baseline 效果 在这里插入图片描述

这个效果感觉实现的和flex-end值一样,理论上应该不一样,baseline 是基于基线,网络照一张图放着标记一下

在这里插入图片描述

align-content

该属性可以和 justify-content 一起理解, justify-content 主轴方向的对齐方式简单理解为水平方向的对齐方向,而algin-content 可以简单理解为垂直方向的对齐方式,实际上是交叉轴的对齐和分布方式,因此如果只有一排flex子项 algin-content不会有效果

语法

align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;

参数:

stretch 默认值 每一个行的高度都会被拉升, 平均沾满高度
flex-start 和主轴方向有关 默认顶部对齐
flex-end 和主轴方向有关 默认底部对齐
center 和主轴方向有关 垂直居中对齐
space-between 垂直两端对齐
space-around 每一行上下距离有有不折叠空间,每两个行中底距离相等
space-evenly 每一行上下距离平局分空间距离

示例

stretch

    .container{
      height: 300px;
      display:flex;
      flex-wrap: wrap;
      align-content: stretch;
    }

实际效果

在这里插入图片描述

flex-start效果

在这里插入图片描述

flex-end 效果

在这里插入图片描述

space-between 效果

在这里插入图片描述

space-around 效果

在这里插入图片描述

space-evenly 效果

在这里插入图片描述

flex 子项的css 属性

flex弹性布局,在容器已经表现的很优秀了。然而 为了面对复杂的需求和个性化的布局需求,在flex容器里面的子项,依托父级的属性同时还可以玩出自己的花样。在既有的规则下面谋求生存。

order

改变子项的排序顺序 默认值都是0

语法

    order: <integer>;

参数

integer 整型 默认值是 0 可以是负数

让子项 第二个排到第一为位置

    .container{
      display:flex;
    }
    .container div:nth-child(2){
      order:-1;
    }

在这里插入图片描述

flex-grow

扩展flex子项目占有容器的空间,即放大比例;如果空间存在的话,不存在就失效,flex-grow 的默认值是0,当设置了这个值,允许为小数,则用设置的值来等比占领空间比;容器剩余空间值为1,占满为止;子项设置是小数总和占比没有达到剩余空间比,则容器空间依然存在,

语法

    flex-grow: <number>; /* 数值,可以是小数,默认值是 0 */

让第三个子项目占领剩余空间 只需要设置为1

.container{
      display:flex;
    }
    .container div:nth-child(3){
      flex-grow:1;
    }

在这里插入图片描述

让所有子项都分配0.5试试效果

在这里插入图片描述

flex-shrink

主要处理当flex容器空间不足时候,单个元素的收缩比例

语法 不支持负数

    flex-shrink: <number>; /* 默认值 1 */
.container div:nth-child(2){
      flex-shrink:2;
    }

在这里插入图片描述

flex-basis 

分配多余空间之前,子项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。即:告诉浏览器我需要的空间给我留着;

语法

 flex-basis: <length> | auto; /* 默认 auto */

可以简单理解为 是一个可以定义宽度的属性。 如果同时设置width和flex-basis,就渲染表现来看,会忽略width。当flex-basis设置当宽度小于内容当时候选内容宽度

    .container{
      display:flex;
    }
    .container div:nth-child(2){
      flex-basis:100px;
    }

在这里插入图片描述

flex

是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

语法

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

其中第2和第3个参数(flex-shrink和flex-basis)是可选的。默认值为0 1 auto。

实际中用当应该是最多的

    .container{
      display:flex;
    }
    .container div:nth-child(2){
      flex:1 0 auto;
    }

效果

在这里插入图片描述

align-self

指控制单独某一个flex子项的垂直对齐方式,和父级容器align-items一样,只是当前单独控制自己

语法

    align-self: auto | flex-start | flex-end | center | baseline | stretch;

示例:不多举 和上面介绍的一样

选择第二个子项目底部对齐

.container{
      display:flex;
    }
    .container div:nth-child(2){
      align-self:flex-end;
    }

效果

在这里插入图片描述

场景使用

综合下来display: flex 弹性布局适合摸一个模块,某一个组件,一个单一的运用感觉很适合 庞大的系统布局,看个人来选择,我估计不会选择

chinaynlmq.cn

转载请注明: 百网思 » 弹性display: flex布局自看笔记

喜欢 (199) or 分享 ( 0)

发表我的评论

您尚未登录,请 登录注册 后评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(0)个小伙伴在吐槽