CSS笔记——flex

一. flex简介

1. flex是CSS中的又一种布局手段，主要用来代替浮动来完成页面的布局
2. flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
3. 弹性容器
   (1) 要使用弹性盒，必须先将一个元素设置为弹性容器
   (2) 可以通过display来设置弹性容器
   ①设置为块级弹性容器 —— display:flex
   ②设置为行内的弹性容器 —— display:inline-flex
4. 弹性元素
   (1) 弹性容器的子元素是弹性元素
   (2) 一个元素可以同时是弹性容器和弹性元素

二. 弹性容器

1. flex-direction：设置容器中弹性元素的排列方式
   (1) 可选值：
   ①row：弹性元素在容器中水平排列（默认值）
   ②row-reverse：弹性元素在容器中反向水平排列
   ③column：弹性元素在容器中纵向排列
   ④column-reverse：弹性元素在容器中纵向反向排列
   (2)主轴：弹性元素的排列方向称为主轴
   (3)侧轴：与主轴垂直的排列方向称为侧轴
2. flex-wrap：设置弹性元素是否在弹性容器中自动换行
   (1) 可选值：
   ①no-wrap：元素不会自动换行（默认值）
   ②wrap：元素沿着辅轴方向自动换行
   ③wrap-reverse：元素沿着辅轴方向反向换行
3. flex-flow：flex-direction和flex-wrap的简写属性
4. justify-content：设置如何分配主轴上的空白空间
   (1) 可选值：
   ①flex-start：元素沿着主轴起边排列
   ②flex-end：元素沿着主轴终边排列
   ③center：元素居中排列
   ④space-around：空白分布到元素两侧
   ⑤space-evenly：空白分布到元素的单侧
   ⑥space-between：空白均匀分布到元素间
5. align-items：设置元素在辅轴上如何对齐
   (1) 可选值：
   ①stretch：将元素的长度设置为相同的值（默认值）
   ②flex-start：元素不会拉伸，沿着辅轴起边对齐
   ③flex-end：元素不会拉伸，沿着辅轴终边对齐
   ④center：居中对齐
   ⑤base-line：基线对齐
6. align-content：设置如何分配辅轴上的空白空间（可选值同justify-content）

三.弹性元素

1. flex-grow：指定弹性元素的伸展系数
   (1) 当父元素有多余空间时，子元素如何伸展
   (2) 父元素的剩余空间，会按照比例进行分配
2. flex-shrink：指定弹性元素的收缩系数
   (1) 当父元素中的空间不足以容纳所有的子元素时，子元素如何收缩
3. flex-basis：指定的是元素在主轴上的基础长度
   (1) 如果主轴是横向的，则该值指定的就是元素的宽度
   (2) 如果主轴是纵向的，则该值指定的是元素的高度
   (3) 默认值是auto，表示参考元素自身的高度或宽度，如果传递了一个具体的数值，则以该值为准
4. flex可以设置弹性元素的三个样式
   (1) flex: flex-grow flex-shrink flex-basis;
   (2) 可选值：
   ①initial：相当于flex:0 1 auto;
   ②auto：相当于flex:1 1 auto;
   ③none：相当于flex：0 0 auto；（弹性元素没有弹性）
5. align-self：用来覆盖当前弹性元素上的align-items
6. order：指定弹性元素的排列顺序