何为flex布局？

简介：flex 是一个CSS的display 属性中新添加一个值。随着inline-flex的使用，它将使它适用的元素成为一个flex container（伸缩容器），而这个元素的每个子元素将成为 flex item（伸缩项目）。

伸缩项目将参与到flex布局中，所有由CSS Flexible Box Layout Module（CSS伸缩盒布局模型）定义的属性都能被它们使用

主轴:默认情况下，主轴是x轴，侧轴是y轴，项目则排列在主轴方向上

flex 属性是flex-grow, flex-shrink 和 flex-basis 属性的简写。

参考文章 Flex布局教程

flex布局新、旧版属性对比

作用于	属性	新版flex	旧版flex	备注
容器上	语法	display:-webkit-flex/flex	display:-webkit-box	/
容器上	主轴方向	flex-direction: row/row-reverse column/column-reverse	-webkit-box-orient: horizonal/vertical -webkit-box-direction: normal/reverse	主轴：x轴/y轴侧轴：与主轴垂直的另外一轴
容器上	主轴对齐方式	justify-content: flex-start/flex-end/center space-between/space-around	-webkit-box-pack: start/end/center/justify	富余空间：取值为flex-start或start时富余空间在主轴的正方向上取值为flex-end或end时富余空间在主轴的反方向上
容器上	侧轴对齐方式	align-items: flex-start/flex-end center/baseline/strech	-webkit-box-align: start/end/center	富余空间：取值为flex-start或start时富余空间在主轴的正方向上取值为flex-end或end时富余空间在主轴的反方向上
项目上	富余空间	flex-grow:0/1/auto	-webkit-box-flex:0/1	flex-grow定义项目的放大比例

新版flex新增特性

作用于	属性	备注
容器上	flex-wrap:nowrap/warp/wrap-reverse	默认单行排列，宽度压缩时项目缩小取值非nowrap时，即是拥有侧轴方向 wrap 侧轴正方向 wrap-reverse 侧轴反方向
容器上	align-content:start/end/center/space-between/space-around-strech	多行对齐时的整体堆砌方式
容器上	flex-grow:flex-direction+flex-wrap	决定着主轴、侧轴的方向
项目上	order:number	给项目标记数字，控制项目顺序
项目上	align-self: auto/start/end/center/space-between/space-around-strech	除去容器的align-items的设定，只管理自身的侧轴对齐方式
项目上	flow-basis:auto/0/1/auto flex-shrink:1/0/auto	flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）它可以设为跟width或height属性一样的值，将项目占据固定空间 flex-shrink定义项目的缩小比例

等宽布局

.wrapper {
  width:300px;
  height:300px;
  display:flex;   
  justify-content:flex-start;
}
.innerBox {
  height:50px;
  flex-shrink:1 /*无效设定，不考虑*/
  flex-grow:1;
  flex-basis:0%;
}

本文作者： moofing

本文链接： https://moofing.gitee.io/posts/22461.html

更新于 2020-11-30

CSS3 # flex