flex弹性布局学习

Posted 2020-10-02 馒头仔

一、介绍

　　flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持：

二、了解两个基本概念：
　　容器：需要添加弹性布局的父元素；

　　项目：弹性布局容器中的每一个子元素，称为项目；

　　容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

　　项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器属性详述

 　　1.flex-direction

　　　　flex-direction属性决定主轴的方向（即项目的排列方向）。

　　　　row:主轴为水平方向，项目沿主轴从左至右排列

　　　　column：主轴为竖直方向，项目沿主轴从上至下排列

　　　　row-reverse：主轴水平，项目从右至左排列，与row反向

　　　　column-reverse：主轴竖直，项目从下至上排列，与column反向

 

　　2、flex-wrap

　　　　flex-wrap：定义，如果一条轴线排不下，如何换行。

　　　　nowrap：自动缩小项目，不换行

　　　　wrap：换行，且第一行在上方

 

　　　　wrap-reverse：换行，第一行在下面

 

3、flex-flow

　　　　flex-direction属性和flex-wrap属性的缩写形式，默认值为row nowrap

4、justify-content

　　　　决定item在主轴上的对齐方式，可能的值有flex-start（默认），flex-end，center，space-between，space-around。当主轴沿水平方向时，具体含义为

　　　　　　flex-start：左对齐

　　　　　　flex-end：右对齐

　　　　　　center：居中对齐

　　　　　　space- between：两端对齐

　　　　　　space-around：沿轴线均匀分布

5、align-items

　　align-items属性：定义项目在交叉轴上的排列方式

　　　　flex-start：顶端对齐

　　　　flex-end：底部对齐

　　　　center：竖直方向上居中对齐

　　　　baseline：item第一行文字的底部对齐

　　　　stretch：当item未设置高度时，item将和容器等高对齐

　　

 6、align-content

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

　　　　　　flex-start：左对齐

　　　　　　flex-end：右对齐

　　　　　　center：居中对齐

　　　　　　space- between：两端对齐

　　　　　　space-around：沿轴线均匀分布

　　　　　　stretch：各行将根据其flex-grow值伸展以充分占据剩余空间

　　效果图如下

四、作用于项目上的属性

1、order

　　　　order的值是整数，默认为0，整数越小，排列越靠前，如下图所示代码如下

<div id="wrap">
    <div class="div" style="order:4">1</div>
    <div class="div" style="order:2">2</div>
    <div class="div" style="order:3">3</div>
    <div class="div" style="order:1">4</div>
</div>

2、flex-grow

　　　　定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例，如

<div class="wrap">
    <div class="div" style="flex-grow:1">1</div>
    <div class="div" style="flex-grow:2">2</div>
    <div class="div" style="flex-grow:3">3</div>
</div>

即当有多余空间时item1、item2、和item3以1：2:3的比例放大。

3、flex-shrink

　　　　flex-shrink属性 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

4、flex-basis

flex-basis属性 定义项目占据的主轴空间。（设置后如果主轴为水平，则设置的这个属性，相当于设置项目的宽度。原width会失效）

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
    　这个属性有两个快捷设置： auto=(1 1 auto)/none=(0 0 auto)

align-self属性 ：定义单个项目自身在交叉轴上的排列方式，可以覆盖掉让其上的align-items属性
　　属性值：与align-items相同，默认值为auto，表示继承父容器的align-items属性。