弹性布局flex

弹性布局flex

在平时的我们常用的布局类型有以下几种：

• 1.浮动+定位
• 2.自适应（百分比）
• 3.响应式布局
• 4.弹性布局（Flex布局）

今天所要整理的就是比较常用的弹性布局，但块标签与行内块标签是有区别的。

// css样式
   * {
            padding: 0;
            width: 0;
            box-sizing: border-box;
        }

    .item {
            width: 110px;
            height: 110px;
            background-color: aqua;
            margin: 5px;
        }

    .list {
            width: 500px;
            height: 500px;
            border: 3px solid brown;
            /* list 容器变为弹性盒子 
                主轴: 默认 从左往右
                交叉轴: 与主轴垂直的 ,默认从上到下
            */
            display: flex;  // 容器变为弹性盒子 
            }

// 布局
     <div class="list">
        <div class="item">001</div>
        <div class="item">002</div>
        <div class="item">003</div>
        <div class="item">004</div>
        <div class="item">005</div>
    </div>

1. flex-direction属性:

• 设置主轴方向

• flex-direction: row (默认值）从左往右排列;
• flex-direction: row-reverse 从右往左排列;
• flex-direction: column 从上往下排列;
• flex-direction: column-reverse 从下往上排列;

2. flex-wrap属性:

• 设置轴线,当子元素宽度和大于父元素时,是否设置在一条线上排列

• flex-wrap: nowrap (默认值）在一条线上排列;
• flex-wrap: wrap 换行多条线排列,第一行在上边;
• flex-wrap: wrap-reverse 换行多条线排列,第一行在下边;

3. align-content属性:

• 设置多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用 :

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

4. justify-content属性:

• 在主轴上的对齐方式

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

5. align-items属性:

• 在交叉轴上的对齐方式

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

6. 简写方式flex-flow属性:

• flex-flow属性是以1,2属性的简写形式，默认值是row nowrap。

• flex-flow: flex-direction;
• flex-flow: flex-wrap;

注意:

弹性盒子中的元素,不受自身属性的控制其他 inline/block 变为inline-block。