flex布局的一些属性

亦凉 2022-10-25 13:00 245阅读 0赞

**Flex布局**：flexible box的缩写，意思为弹性布局，因此flex布局就是弹性布局

**适用对象**：行内元素和块级元素都可以使用flex布局

设置了Flex的元素，它的所有子元（此时为flex item）素都将成为会做出相应变化

### 设置在父元素身上的六个属性， ###

前提：给父元素设置了display：flex属性

#### 1、flex-direction ####

设置元素的排列方向：

row（默认）从左到右 row-reverse从右到左

column从上到下 column-reverse从下到上

row/row-reverse 竖直方向 column/column-reverse水平方向

加入reverse则反向排列  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnRzaHVp_size_16_color_FFFFFF_t_70_pic_center]

#### 2、flex-wrap ####

设置换行格式：

nowrap（默认） 不换行

wrap 换行，从上往下正常换行

wrap-reverse 换行，从上往下换行

因为默认是不换行的，所以当我们需要它换行的时候，就可以使用该属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnRzaHVp_size_16_color_FFFFFF_t_70_pic_center 1]

#### 3、flex-flow ####

flex-direction的缩写,默认值为row nowrap，格式如下

flex-flow：<flex-direction> <flex-wrap>

#### 4、justify-content ####

设置水平对齐方式

flex-start 左对齐

flex-end 右对齐

center 中间对齐

space-between 左右留空，平均分布

space-around 左右不留空，平均分布  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnRzaHVp_size_16_color_FFFFFF_t_70_pic_center 2]

#### 5、align-items ####

设置竖直对齐方式

stretch （默认）占满整个容器

flex-start 上对齐

flex-end 下对齐

center 中间对齐，元组的中间位置在同一水平线上

baseline 项目的第一行文字对其  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnRzaHVp_size_16_color_FFFFFF_t_70_pic_center 3]

#### 6、align-content ####

设置容器内各个项目在垂直方向的排列方式，并且只有在设置了flex-wrap这个属性时才会起作用

stretch 拉伸占满，适应容器

flex-start 位于容器开头

flex-end 位于容器结尾

center 位于容器中心

space-between 行间留白，上下不留白

space-around 行间、上下都留白  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnRzaHVp_size_16_color_FFFFFF_t_70_pic_center 4]

**注:** align-content与align-items的区别

align-content对于单行的是没有效果的；但是align-items对于单行和多行都有效果

因此，align-items用的较多

**下面总结一下：**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flex-direction</td> 
   <td>设置整体排列列方向</td> 
  </tr> 
  <tr> 
   <td>flex-wrap</td> 
   <td>换行</td> 
  </tr> 
  <tr> 
   <td>flex-flow</td> 
   <td>1、2的缩写</td> 
  </tr> 
  <tr> 
   <td>justify-content</td> 
   <td>水平对齐方式</td> 
  </tr> 
  <tr> 
   <td>align-items</td> 
   <td>竖直对其方式</td> 
  </tr> 
  <tr> 
   <td>align-content</td> 
   <td>多行的竖直对齐方式</td> 
  </tr> 
 </tbody> 
</table>

### 设置在子元素上面的六个属性 ###

#### 1、order ####

定义项目的排列顺序,number的数值越小，排列越靠前，可以为负值  
![在这里插入图片描述][20210131220921881.jpg_pic_center]

#### 2、flex-grow ####

定义项目的放大比例

如果空间剩余，浏览器会根据flex-grow的值来分配给对应的元素放大之后的空间大小

默认值0（不放大）  
![在这里插入图片描述][20210131220932755.jpg_pic_center]

#### 3、flex-shrink ####

定义项目的缩小比例

如果空间不够，浏览器会根据flex-grow的值来分配给对应的元素缩小之后的空间大小

默认值1(不缩小)

上面三个格式：

.item{order|flex-grow|flex-shrink:<number>}

#### 4、flex-basis ####

定义在分配空间之前，将会用到的空间的大小

默认值为auto，就是项目的原本的大小，我们还可以给他设置如px等来控制大小

#### 5、flex ####

flex-grow、flex-shrink、flex-basis的缩写

#### 6、align-self ####

可以让某一个元素脱离父元素的设定，拥有单独的对齐方式

stretch （默认）占满整个容器

flex-start 上对齐

flex-end 下对齐

center 中间对齐，元组的中间位置在同一水平线上

baseline 项目的第一行文字对其

align-self的属性值和align-item一样

**下面总结一下**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>order</td> 
   <td>排列顺序</td> 
  </tr> 
  <tr> 
   <td>flex-grow</td> 
   <td>放大比例</td> 
  </tr> 
  <tr> 
   <td>flex-shrink</td> 
   <td>缩小比例</td> 
  </tr> 
  <tr> 
   <td>flex-basis</td> 
   <td>分配空间大小</td> 
  </tr> 
  <tr> 
   <td>flex</td> 
   <td>2、3、4的缩写</td> 
  </tr> 
  <tr> 
   <td>align-self</td> 
   <td>单独设置</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnRzaHVp_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/075abfee364449a7a2498604e7c4b800.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnRzaHVp_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221024/eed849aca0c8473bbbc14476d7223f1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnRzaHVp_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221024/8a794240b324422c9a8f62e97814704c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnRzaHVp_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221024/45b7c7cd1c6447419f6fabd72e773f55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnRzaHVp_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221024/eebebc9c795a4a8c806e3b241f2fef53.png
[20210131220921881.jpg_pic_center]: /images/20221024/28ed5dbf184146dbaada58da89cfd829.png
[20210131220932755.jpg_pic_center]: /images/20221024/93015627ead2477699e28ccf2dd0913f.png