Flex布局父项常见属性

一、Flex布局父项常见属性介绍

• flex-direction：设置主轴的方向
• justify-content：设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴上的子元素的排列方式（多行）
• align-items：设置侧轴上的子元素排列方式（单行）
• flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

二、Flex布局父项常见属性详解

2.1、flex-direction

• 说明

  设置主轴的方向（即项目的排列方向）。

  在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴

  默认主轴方向就是 x 轴方向，水平向右

  默认侧轴方向就是 y 轴方向，水平向下

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

有4个取值：

• 注意

  主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

2.2、flex-wrap

• 说明

  设置是否换行

  默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。

• 举例

  
      .box{
            flex-wrap: nowrap | wrap | wrap-reverse;
      }
  
  

• 可能取值

  1. nowrap（默认）：不换行

     如果显示不开，会缩小子元素的宽度，放到父元素里面

2. wrap：换行，第一行在上方。

3. wrap-reverse：换行，第一行在下方。

2.3、flex-flow

• 说明

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

  .box {
    flex-flow: <flex-direction> || <flex-wrap>;
    <!-- flex-flow:row wrap; -->
  }
  

2.4、justify-content

• 说明

  设置主轴上的子元素排列方式

• 语法

  .box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
  }
  

• 效果

• 可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

2.5、align-items

• 说明

  设置侧轴上的子元素排列方式（单行 ）

  该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用。

• 举例

  .box {
    align-items: flex-start | flex-end | center | baseline | stretch;
  }
  

• 取值

  flex-start 从头部开始

  flex-end 从尾部开始

  center 居中显示

  baseline: 项目的第一行文字的基线对齐。

  stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

2.6、align-content

• 说明

  设置侧轴上的子元素的排列方式（多行）

  设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• 该属性可能取6个值。

  flex-start：与交叉轴（侧轴）的起点对齐。

  flex-end：与交叉轴（侧轴）的终点对齐。

  center：与交叉轴（侧轴）的中点对齐。

  space-between：与交叉轴（侧轴）两端对齐，轴线之间的间隔平均分布。

  space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

  stretch：轴线占满整个交叉轴。

• 效果

2.7、align-content 和align-items区别

1. align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸
2. align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
3. 总结就是单行找align-items 多行找 align-content