Flex布局子元素对齐方式

我就是我 2023-07-07 12:53 17阅读 0赞

# display #

--------------------

display: flex | inline-flex ;

`display`确定是否启用flexbox布局，flexbox布局下的子元素无论是内联元素的还是块状元素都会flex流的布局方式进行空间分配

# flexDirection #

--------------------

flexDirection: row | row-reverse | column | column-reverse;

用来声明主轴的方向和在主轴上排列的方向

<table> 
 <thead> 
  <tr> 
   <th align="left">values</th> 
   <th align="left">description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">row（默认）</td> 
   <td align="left">子元素在ltr排版方式下从左向右排列；在rtl排版方式下从右向左排列</td> 
  </tr> 
  <tr> 
   <td align="left">row-reverse</td> 
   <td align="left">与row排列方向相反，在ltr排版方式下从右向左排列；在rtl排版方式下从左向右排列</td> 
  </tr> 
  <tr> 
   <td align="left">column</td> 
   <td align="left">类似于row但是是顶部到底部 column-reverse：类似于row-reverse但是是底部到顶部</td> 
  </tr> 
 </tbody> 
</table>

# flexWrap #

--------------------

flexWrap: nowrap | wrap | wrap-reverse;

flex-wrap属性定义如果主轴上不下如何换行。

<table> 
 <thead> 
  <tr> 
   <th align="left">values</th> 
   <th align="left">description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">nowrap（默认)</td> 
   <td align="left">子元素以单行显示，在ltr下自左向右；在rtl下自右向左</td> 
  </tr> 
  <tr> 
   <td align="left">wrap</td> 
   <td align="left">子元素可以以多行显示，在ltr下自左向右；在rtl下自右向左</td> 
  </tr> 
  <tr> 
   <td align="left">wrap-reverse</td> 
   <td align="left">子元素可以以多行显示，与wrap相反</td> 
  </tr> 
 </tbody> 
</table>

# justifyContent #

--------------------

justifyContent: flex-start | flex-end | center | space-between | space-around;

主轴方向上的对齐方式

<table> 
 <thead> 
  <tr> 
   <th align="left">values</th> 
   <th align="left">description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">flex-start（默认）</td> 
   <td align="left">子元素从一行的起始处开始放置</td> 
  </tr> 
  <tr> 
   <td align="left">flex-end</td> 
   <td align="left">子元素会从一行的结尾处开始放置</td> 
  </tr> 
  <tr> 
   <td align="left">center</td> 
   <td align="left">子元素会集中在一行的中央</td> 
  </tr> 
  <tr> 
   <td align="left">space-between</td> 
   <td align="left">子元素会被均匀的分布在行内，两端与父容器无间隙</td> 
  </tr> 
  <tr> 
   <td align="left">space-around</td> 
   <td align="left">子元素会均匀的按照等距离分布在一行</td> 
  </tr> 
 </tbody> 
</table>

效果如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]

# alignItems #

--------------------

alignItems: flex-start | flex-end | center | baseline | stretch;

与主轴垂直的方向成为侧轴，`alignItems`用来定义侧轴方向上的对齐方式

<table> 
 <thead> 
  <tr> 
   <th align="left">values</th> 
   <th align="left">description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">flex-start</td> 
   <td align="left">子元素在侧轴起点边的外边距紧靠住该行在侧轴起始的边</td> 
  </tr> 
  <tr> 
   <td align="left">flex-end</td> 
   <td align="left">子元素在侧轴起点边的外边距紧靠改行在侧轴结尾的边</td> 
  </tr> 
  <tr> 
   <td align="left">center</td> 
   <td align="left">子元素会被放置在侧轴的中央</td> 
  </tr> 
  <tr> 
   <td align="left">baseline</td> 
   <td align="left">子元素会根据他们的基线对齐</td> 
  </tr> 
  <tr> 
   <td align="left">stretch（默认）</td> 
   <td align="left">在侧轴方向上拉伸子元素以致填充满flexbox容器。</td> 
  </tr> 
 </tbody> 
</table>

效果如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 1]

# alignContent #

--------------------

根据在侧轴上的额外空间来排列容器的行，alignContent与alignItems的作用类似，但是只对多行的flex布局才有效果，对单行布局没有效果

<table> 
 <thead> 
  <tr> 
   <th align="left">values</th> 
   <th align="left">description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">flex-start</td> 
   <td align="left">行会紧靠容器的起始位</td> 
  </tr> 
  <tr> 
   <td align="left">flex-end</td> 
   <td align="left">行紧靠容器的结束位</td> 
  </tr> 
  <tr> 
   <td align="left">center</td> 
   <td align="left">行紧靠容器的中间位</td> 
  </tr> 
  <tr> 
   <td align="left">space-between</td> 
   <td align="left">每行会均匀分布；首行在容器起始处而最后行在容器结束处</td> 
  </tr> 
  <tr> 
   <td align="left">space-around</td> 
   <td align="left">每行根据相同的距离均匀的分布</td> 
  </tr> 
  <tr> 
   <td align="left">stretch（默认）</td> 
   <td align="left">每行将会伸展以占用剩余的空间</td> 
  </tr> 
 </tbody> 
</table>

使用效果如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 2]

# flexFlow #

--------------------

flexFlow: ‘flex-direction’ ‘flex-wrap’

相当于同时设置两个属性：

*  flex-direction: row
 *  flex-wrap: wrap;

# flex #

--------------------

flex: flex-grow flex-shrink flex-basis;

flex属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性， 默认值分别是"0 1 auto"，其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数

<table> 
 <thead> 
  <tr> 
   <th align="left">values</th> 
   <th align="left">description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">flex-grow</td> 
   <td align="left">一个数字，规定项目将相对于其他灵活的项目进行扩展的量。 默认值 0</td> 
  </tr> 
  <tr> 
   <td align="left">flex-shrink</td> 
   <td align="left">一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值 1</td> 
  </tr> 
  <tr> 
   <td align="left">flex-basis</td> 
   <td align="left">项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。默认值 auto</td> 
  </tr> 
 </tbody> 
</table>

宽度 ＝ 弹性宽度 \* ( flexGrow / sum( flexGorw ) )

# alignSelf #

--------------------

`alignSelf`属性允许单个元素有与其他元素不一样的对齐方式，可覆盖`alignItems`属性。默认值为auto，表示继承父元素的`alignItems`属性，如果没有父元素，则等同于stretch。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200224121613479.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200224121647282.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200224121917208.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70