flex布局学习

Flex布局

1. flex 布局的概念

      flexible box: 弹性盒状布局
      容器控制内部元素的布局定位
      CSS3引入的新布局模型
      伸缩元素，自由填充，自适应

2.flex布局的优势

    可在不同方向排列元素
    控制元素排列的方向
    控制元素的对齐方式
    控制元素之间的等距
    控制单个元素放大与缩放比例，占比，对齐方式

3.flex布局的常用术语

  flex container：flex 容器
  flex item：flex 项目（元素）
  flex direction： 布局方向

4.flex-direction

row  排列方向：从左到右
row-reverse  排列方向：从右到左
column 排列方向：从上到下 
column-reverse 排列方向：从下到上

5.flex-wrap

wrap：换行
nowarp：不换行

6.justify-content

flex-start: (默认)左对齐或向上对齐
flex-end：右对齐或向下对齐
center：居中对齐
space-between：两端对齐，元素之间平均等分剩余空白间隙部分
space-around：元素两边平均等分剩余空白间隙部分，最左或最右和元素之间的距离是1:2

7.align-items(设置元素在纵轴上的对齐方式)

 flex-start：在纵轴上向起点位置（向上 / 向左）对齐
 flex-end：在纵轴上向起点位置（向下 / 向右）对齐
 center：居中对齐
 baseline：保证元素中的文字在同一条基准线（保证每一个文字都在同一条线上）
 stretch ( 默认 )：当元素的高度没有设置，则元素的高度会拉伸至容器高度一致

8.align-content（当轴线超过1条的时候，flex容器可以把更多条轴线视为元素对待，可以进行对齐）高度设定，元素换行时，会将剩下的空白区域进行平分，这时会出现换行元素之间出现空白

 center：居中（轴线居中）
 flex-start：向左对齐
 flex-end：向右对齐
 stretch：当宽度width没有设置的时候，轴线可以被拉伸
 space-between：两端对齐，元素之间的空白等比切分
 space-around：轴线两边的空白等比切分

9.order（用于设置flex容器内部的每个元素的排列顺序，默认是0，排列规则，从小到大）

10.flex-grow（用于设置元素的放大比例，默认为0，如果为0，则不放大）

11.flex-shrink（用于定义属性的缩放比例，默认为1，设置为0的时候，不进行缩放，会去挤压其他元素）

12.flex-basis（设置元素固定或自动空间的占比）flex-grow和flex-shrink会沾满所有的空间，flex-basis则不会

13.align-self（重写align-items父属性）

重写容器中元素在纵轴上的对齐方式
auto：默认，继承父元素属性
flex-start：在纵轴上向起点位置（向上 / 向左）对齐
flex-end：在纵轴上向起点位置（向下 / 向右）对齐
center：居中对齐
baseline：保证元素中的文字在同一条基准线（保证每一个文字都在同一条线上）
stretch：当元素的高度没有设置，则元素的高度会拉伸至容器高度一致

来源：CSDN

作者：qq_43477721

链接：https://blog.csdn.net/qq_43477721/article/details/104128320