flex弹性布局

视频链接：20分钟掌握CSS Flex布局_哔哩哔哩_bilibili

flex解决一个父容器和多个子元素的问题

要启用flex布局，需要在父元素上添加display:flex

 用于父元素上的属性：

display:flex;

flex-direction

flex-warp

justify-content

align-items

justify-content:

在父元素上设置主轴方向上排列的元素，center居中，flex-start首部居左，flex-end尾部局右

使用space-between,利用剩余的空间将每个元素进行均匀分割,在最两侧边界没有空

 space-around剩余空间将元素均匀分割的同时，两侧有空位,给每个元素都分配了相等的左右空间

space-evenly剩余空间均匀分布

flex-direction:

在父元素上设置主轴方向，默认水平，column:垂直方向主轴属性

align-items:

调整在交叉轴上的位置

flex-warp:

当页面缩小导致弹性盒子原有规定的形状发生改变，flex-warp:wrap动态调整换行

用在子元素上的属性：

flex-grow

flex-shrink

flex-basis

flex

align-self

order

flex-grow:

子元素盒子在没有指定宽度的方向上，可以增长的程度

 这样设置有利于等宽页面的设置

flex-shrink

规定子元素盒子是否为可压缩的，父元素缩小，flex-shrink:0不可压缩

flex-basis

子元素盒子起始大小，有flex-grow:存在是，要依据最后盒子分配到的大小为准

flex

缩写，flex-grow，flex-shrink，flex-basis的缩写，约束份数

align-self

让子元素覆盖掉本身父元素给的属性，align-self：flex-start；flex-end；center

order

 不改变html中盒子顺序，但是在展示时，改变展示顺序，子元素order值越大排序越靠后，默认值为0

总结

• flex子项目在主轴的缩放比例 ：flex: 2; 约束份数,整数值(使用后宽高失效). 如果用百分数,要加起来是100才可以用. 可实现圣杯布局

• flex-direction调整主轴方向：row 、row-reverse、 column 、column-reverse

• flex-wrap控制是否换行： nowrap、wrap、wrap-reverse;

• flex-flow是flex-direction、flex-wrap的简写形式

• align-items调整侧轴对齐（垂直对齐）（单行）stretch; 默认值。项目被拉伸以适应容器。center; 项目位于容器的中心。flex-start; 项目位于容器的开头。垂直对齐开始位置 上对齐、 flex-end; 项目位于容器的结尾。垂直对齐结束位置 底对齐

• align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐

• • stretch; 默认值。项目被拉伸以适应容器。center; 项目位于容器的中心。flex-start; 项目位于容器的开头。flex-end; 项目位于容器的结尾。 space-between; 项目位于各行之间留有空白的容器内。(中间空白)、space-around 项目位于各行之前、之间、之后都留有空白的容器内。(空白包裹项目)

  • 必须设置以下属性才会起作用。对父元素设置自由盒属性display:flex；设置排列方式为横向排列flex-direction:row；设置换行flex-wrap:wrap;

• align-self自己的对齐方式；

• justify-content调整主轴对齐（水平对齐）

• order控制子项目的排列顺序：用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是 0

flex布局博客：Flex 布局教程：语法篇 - 阮一峰的网络日志