Flex弹性盒子优雅布局

Flex简介

在flex布局之前,我们想要为页面做一个有优雅的两栏或者三栏布局需要大费周折的使用浮动或者定位来实现,如今我们可以快速方便是使用flex弹性盒子来实现

• Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。块级元素使用display: flex; 行内元素使用inline-flex,容器使用Flex布局后，子元素的float、clear和verticle-align属性将失效

基本概念

• 当前元素设置display: flex;或者inline-flex,该盒子称为flex container容器,简称"容器"
• 当前元素的所有子元素自动成为容器成员,成为Flex项目(flex item），简称"项目"。
• 容器默认分为两根轴:水平的主轴和垂直的交叉轴,主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

用在项目上的6个属性

• flex-grow:放大比例
• flex-shrink:缩小比例
• flex-basis:伸缩基准值
• flex:是flex-grow, flex -shrink和flex -basis的简写
• order:排列顺序
• align-self :单个项目对齐方式

1. flex-grow

定义flex-item在主轴上的放大比例, 默认值为0：即使存在剩余空间（宽度），也不放大。

• 根据所设置的比例分配盒子所剩余的空间
• 拓展:左右两栏布局默认值O;
• 如果所有flex-item的flex-grow属性值都是1，表示它们均分剩余空间（如果有）

2. flex-shrink

定义flex-item在主轴上的缩小比例。默认值为1，即如果空间不足，该flex-item会缩小。

• 置元素的收缩比例一多出盒子的部分，按照比例的大小砍掉相应的大小，即比例越大，被砍的越大，默认值1;
• 如果所有flex-item的flex-shrink属性值都为1，在空间不足时，都将等比例缩小
• flex-shrink为0的flex-item在空间不足时，不会缩小。

3. flex-basis

伸缩基准值.项目占据主轴的空间,默认值为auto，表示flex-item本来的大小。

• 浏览器根据这个属性计算是否存在多余空间
• 如果width和height值固定为绝对长度单位（如350px），该flex-item占据固定空间

4. flex

是flex-grow、flex-shrink和flex-basis三个属性的简写，默认值为0 1 auto

• 两个快捷值：none表示(0 0 auto)；auto表示(1 1 auto)
• 建议优先使用属性值，而非先单独写三个分离的属性（浏览器会自动推算相关值）

5. order

属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

6. align-self

允许单个flex-item与其他flex-item在交叉轴有不同的对齐方式，可以覆盖掉align-items的值

• align-items: auto| flex-start | flex-end | center | baseline | strecth
• 默认值为auto：表示继承父元素的align-items属性
• baseline 按照基准线对齐
• 没有父元素情况下等同于stretch

设置容器上的6个属性 12241.25

• flex-direction 决定主轴的方向
• flex-wrap 是否换行
• flex-flow flex-direction和flex-wrap的简写
• justify-content 项目在主轴上的对齐方式
• align-items 在侧轴上的对齐方式
• align-content 多根轴线的对齐方式

1. flex-direction

决定主轴的方向,即项目的排列方向

• flex-direction：row | row-reverse | column | column-reverse
• row(默认值) 主轴为水平方向,起点在左端
• row-reverse 主轴为水平方向,起点在右端
• column 主轴在垂直方向,起点在上端
• column-reverse 主轴在垂直方向,起点在下端

2. flex-wrap

默认情况下，项目都排在一条线(又称"轴线")上,flex-wrap属性定义,如果一条轴线排不下,如何换行

• flex-wrap：nowrap | wrap | wrap-reverse
• nowrap(默认):不换行
  *wrap:换杭,第一行在上方
• wrap-reverse:换行,第一行在下方

3. flex-flow

是flex-direction和flex-wrap的简写，默认值为row nowrap

flex-flow: &&

4. justify-content

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

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

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

5. align-items

属性定义项目在交叉轴上如何对齐。

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

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

6. align-content

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

• align-content: flex-start | flex-end | center | space-between | space-around | stretch
• stretch（默认值）：轴线沾满整个交叉轴
• space-between：与交叉轴两端对齐，轴线间的间隔平均分布
• space-around：每根轴线两侧的间隔相等
• flex-start：与交叉轴起点对齐

flex水平垂直居中:

.container{
    
    
            margin: 30px;
            height: 100%;
            width:100%;
            background: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        p{
    
    
           
            background: red;
        }

必备知识点:css居中,你还没有记住吗?