flex弹性布局常用属性

发布于：2022-07-13 12:11:57  栏目：技术文档

flex弹性布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

容器属性

• flex-direction 决定主轴的对齐方向，分别有四个属性
  • row（默认值）：主轴为水平方向，起点在左端
  • row-reverse：主轴为水平方向，起点在右端
  • column：主轴为垂直方向，起点在上沿
  • column-reverse：主轴为垂直方向，起点在下沿
• flex-wrap ：定义子元素超过一行，如何换行，分别有三个属性：
  • nowrap（默认值）：默认不换行
  • wrap：换行，第二行在第一行下面，从左到右
  • wrap-reverse：换行，第二行在第一行上面，从左到右
• flex-flow:是flex-direction 和flex-wrap的简写形式，默认是 row nowrap
  • flex-flow：flex-direction flex-wrap
• justify-content: 子元素在主轴对齐方式
  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  • space-evenly：每个项目之间平均对齐
• align-items：交叉轴如何对齐，如果flex-direction：row和row-reverse 那么交叉轴就是y轴，如果是column和column-reverse那么交叉轴是x轴
  • flex-start：交叉轴的起点对齐
  • flex-end：交叉轴的终点对齐
  • center：交叉轴的中点对齐
  • baseline: 项目的第一行文字的基线对齐
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
• align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
  • flex-start：与交叉轴的起点对齐
  • flex-end：与交叉轴的终点对齐
  • center：与交叉轴的中点对齐
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
  • stretch（默认值）：轴线占满整个交叉轴

项目属性

• order：子元素排列的位置默认是按照html先后顺序来排列的，html结构谁在前面默认就排列在前面；order的作用就是改变子元素排列顺序
• 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
  • align-self: auto | flex-start | flex-end | center | baseline | stretch;

* {
  /* 初始化 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body .container {
  /* width: 500px; */
  height: 300px;
  outline: 1px solid darkgrey;
  display: flex;
  /* 设置主轴方向 */
  /* flex-direction: row; */
  /* 设置换行 */
  /* flex-wrap: wrap; */
  /* 简写 */
  flex-flow: row nowrap;
  /* 设置主轴对齐 */
  /* justify-content: center; */
  /* 设置交叉轴 */
  /* align-items: center; */
  /* 设置多行交叉轴对齐 */
  /* align-content: space-between; */
  /* 主轴对齐 */
  place-content: space-evenly;
  /* 交叉轴的对齐 */
  place-items: stretch;
}
body .container .box {
  width: 30px;
  min-height: 30px;
  outline: 1px solid red;
  /* 放大因子 */
  /* flex-grow: 1; */
  /* 缩放因子 */
  /* flex-shrink: 1; */
  /* 项目单独设置宽度 */
  /* flex-basis: auto; */
  /* 简写flex: 放大因素值  缩放因素值  宽度 */
  /* flex: 1 1 auto; */
  flex: auto;
}
body .container .box:first-child {
  background-color: coral;
  /* order 默认值是0，值越小顺序越靠前*/
  order: 3;
  /* 控制某一个项目的交叉轴对齐 */
  /* algin-self:center; */
  place-self: end;
}
body .container .box:nth-of-type(2) {
  background-color: lightgreen;
  place-self: center;
}
body .container .box:last-child {
  background-color: lightblue;
  order: -1;
  place-self: start;
}

相关推荐