CSS3弹性盒子flex布局方式

雨点打透心脏的1/2处 2022-01-23 05:49 410阅读 0赞

**一、CSS3弹性盒子**  
CSS3 弹性盒子：是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。  
引入弹性盒布局模型的目的：提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

**二、CSS3 弹性盒子内容**  
弹性盒子由*弹性容器* 和*弹性子元素*组成。  
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。  
**注意：** 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

**三、CSS3 弹性盒子常用属性**

<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>flex-direction 和 flex-wrap 的简写</td> 
  </tr> 
  <tr> 
   <td>align-items</td> 
   <td>设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式</td> 
  </tr> 
  <tr> 
   <td>align-content</td> 
   <td>修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐</td> 
  </tr> 
  <tr> 
   <td>justify-content</td> 
   <td>设置弹性盒子元素在主轴（横轴）方向上的对齐方式</td> 
  </tr> 
 </tbody> 
</table>

**1、flex-direction 属性：** 决定项目的方向  
**注意**：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。  
**属性值：**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>row</td> 
   <td>默认值。元素将水平显示，正如一个行一样。</td> 
  </tr> 
  <tr> 
   <td>row-reverse</td> 
   <td>与 row 相同，但是以相反的顺序</td> 
  </tr> 
  <tr> 
   <td>column</td> 
   <td>元素将垂直显示，正如一个列一样。</td> 
  </tr> 
  <tr> 
   <td>column-reverse</td> 
   <td>与 column 相同，但是以相反的顺序。</td> 
  </tr> 
 </tbody> 
</table>

**2、flex-wrap 属性:** 规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>nowrap</td> 
   <td>默认值。规定元素不拆行或不拆列。</td> 
  </tr> 
  <tr> 
   <td>wrap</td> 
   <td>规定元素在必要的时候拆行或拆列。</td> 
  </tr> 
  <tr> 
   <td>wrap-reverse</td> 
   <td>规定元素在必要的时候拆行或拆列，但是以相反的顺序</td> 
  </tr> 
 </tbody> 
</table>

**3、flex-flow 属性：**  
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

**4、align-items属性：** 定义flex子项在flex容器的当前行的纵轴方向上的对齐方式。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>stretch</td> 
   <td>默认值。项目被拉伸以适应容器。</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>项目位于容器的中心。</td> 
  </tr> 
  <tr> 
   <td>flex-start</td> 
   <td>项目位于容器的开头。</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>项目位于容器的结尾。</td> 
  </tr> 
  <tr> 
   <td>baseline</td> 
   <td>项目位于容器的基线上。</td> 
  </tr> 
 </tbody> 
</table>

**5、justify-content属性：** 设置或检索弹性盒子元素在横轴方向上的对齐方式。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flex-start</td> 
   <td>默认值。项目位于容器的开头。</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>项目位于容器的结尾。</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>项目位于容器的中心。</td> 
  </tr> 
  <tr> 
   <td>space-between</td> 
   <td>项目位于各行之间留有空白的容器内。</td> 
  </tr> 
  <tr> 
   <td>space-around</td> 
   <td>项目位于各行之前、之间、之后都留有空白的容器内。</td> 
  </tr> 
 </tbody> 
</table>

**四、弹性子元素属性：**

<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>指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。</td> 
  </tr> 
  <tr> 
   <td>flex-basis</td> 
   <td>用于设置或检索弹性盒伸缩基准值。</td> 
  </tr> 
  <tr> 
   <td>flex</td> 
   <td>设置弹性盒子的子元素如何分配空间。</td> 
  </tr> 
  <tr> 
   <td>align-self</td> 
   <td>在弹性子元素上使用。覆盖容器的 align-items 属性。</td> 
  </tr> 
 </tbody> 
</table>

**1、order属性：**

.flex-container .flex-item { order: <integer>; }

integer：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。

**2、flex-grow属性**

.flex-container .flex-item { flex-grow: <integer>; }

integer：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

**3、flex-shrink属性**

.flex-container .flex-item { flex-shrink: <integer>; }

integer：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

**4、flex-basis属性**

.flex-container .flex-item { flex-basis: <integer> | auto; }

integer：一个长度单位或者一个百分比，规定元素的初始长度。  
auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。

**5、flex属性：** 是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flex-grow</td> 
   <td>一个数字，规定项目将相对于其他元素进行扩展的量。</td> 
  </tr> 
  <tr> 
   <td>flex-shrink</td> 
   <td>一个数字，规定项目将相对于其他元素进行收缩的量。</td> 
  </tr> 
  <tr> 
   <td>flex-basis</td> 
   <td>项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。</td> 
  </tr> 
  <tr> 
   <td>auto</td> 
   <td>与 1 1 auto 相同。</td> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>与 0 0 auto 相同。</td> 
  </tr> 
  <tr> 
   <td>initial</td> 
   <td>设置该属性为它的默认值，即为 0 1 auto。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>从父元素继承该属性</td> 
  </tr> 
 </tbody> 
</table>

**6、align-self属性**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>auto</td> 
   <td>默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。</td> 
  </tr> 
  <tr> 
   <td>stretch</td> 
   <td>元素被拉伸以适应容器。</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>元素位于容器的中心。</td> 
  </tr> 
  <tr> 
   <td>flex-start</td> 
   <td>元素位于容器的开头。</td> 
  </tr> 
  <tr> 
   <td>flex-end</td> 
   <td>元素位于容器的结尾。</td> 
  </tr> 
  <tr> 
   <td>baseline</td> 
   <td>元素位于容器的基线上。</td> 
  </tr> 
  <tr> 
   <td>initial</td> 
   <td>设置该属性为它的默认值。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>从父元素继承该属性。</td> 
  </tr> 
 </tbody> 
</table>