CSS中的flex布局

标签：居中   line   star   mamicode   ems   水平   start   flow   inline   

1、flex 布局的概念

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局，行内元素也可以通过 inline-flex 使属性值用 Flex 布局。

inline-flex 和 inline-block 一样，对设置了该属性值的元素的子元素来说是个 display:flex 的容器，对外部元素来说是个 inline 的块。

.box{
  display: flex;
}
.inlinebox{
  display: inline-flex;
}

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

下面将元素分为容器和子元素，设置了 display 属性的即为容器，容器内部的元素即为子元素也称为项目。

2、具有flex属性的容器的属性

设置了 flex 属性的容器可以通过设置其他属性值来设置容器的子元素的排列

以下6个属性可以设置在容器上：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

2.1、flex-direction

flex-direction 属性决定子元素的排列方向，该属性可以有四个属性值：

row（默认值）：主轴为水平方向，起点在左端；row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。

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

<div class="test02">
    <div class="children">
      <p>1</p>
    </div>
    <div class="children">
      <p>2</p>
    </div>
    <div class="children"> 
      <p>3</p>
    </div>
</div>

.test02 {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
 }
.test02 .children{ 
   width: 50px; 
   height: 50px; 
}

下面分别是设置 flex-direction 为 row、　　row-reverse、　　　　　　　　　　　　column、　　　　　　　　　　　　　　　column-reverse 的情况：

2.2、flex-wrap属性

 让弹性盒的子元素在必要的时候拆行，当不设置该属性值的话默认值是不换行的，如果容器装不下子元素的话子元素会进行相应的收缩。有三个属性值：

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

nowrap（默认）：不换行。　　　　　　　　wrap：换行，第一行在上方。　　　　　wrap-reverse：换行，第一行在下方。下面分别对应：

2.3、flex-flow 属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性，默认值为 row nowrap。当然，该属性也可以只设置其中一个属性值。

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

2.4、justify-content属性

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

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

flex-start（默认值）：左对齐；　　　　flex-end：右对齐；　　　　　　　　　　center： 居中；　　　　　　　　　　space-between：两端对齐，项目之间的间隔都相等；

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

CSS中的flex布局

标签：居中   line   star   mamicode   ems   水平   start   flow   inline   

原文地址：https://www.cnblogs.com/wenxuehai/p/10485258.html