Flex布局教程(2)

请注意,本文编写于 183 天前,最后修改于 181 天前,其中某些信息可能已经过时。

作者:阮一峰

css Flex
css Flex

flex-flow

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

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

justify-content属性

justify-content属性定义了项目在主轴上的对其方式。

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

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

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center:居中
  • space-between:两端对齐,项目之间的间隔都相等
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

align-items属性

align-items属性定义项目在交叉轴上如何对齐.

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

他可能取5个值.具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下.

  • flex-start:交叉轴的起点对齐
  • flex-end:交叉轴的终点对齐
  • center:交叉轴的中点对齐
  • baseline:项目的第一行文字的基线对齐
  • stretch:如果项目未设置高度或设为auto,将占满整个容器的高度

align-content属性

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

该属性可能取6个值。

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。
Comments

添加新评论