Flex布局_1

大家好，我是讯享网，很高兴认识大家。

基础概念

Flex 是 Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前，几乎所有的浏览器都支持 Flex 布局。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。如下图所示：
讯享网

Flex的属性

给父级容器的属性
1）display：flex；元素会从左上角横向依次向右排开

justify-content：center；横向居中并在最上方

justify-content：flex-end;横向右侧并在最上方

justify-content：space-between；左右两边对其并在最上方、且之间间距相等

justify-content：space-around；左右两侧间距是中间间距的2分之1，并在最上方

//小编有点懒，只设置一个，剩下属性客官可以自行调配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            width: 500px;
            height: 500px;
            background-color: pink;
            display: flex;
            justify-content: space-around;
        }
        div>div{
            width: 50px;
            height: 50px;
            background-color: red;
        }
       
    </style>
</head>
<body>
    <div class="a">
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
    </div>
</body>
</html>

讯享网

2）align-items：flex-star；//默认位置元素会从左上角依次向右排开

align-items：center；元素会从纵轴中心依次从左向右排开

align-items：flex-end；元素会从纵轴最下放依次从左向右排开

align-items:flex-end;

*给父元素设置：align-items：center；justify-content：center；就会水平垂直居中

3）flex-firection：row；//默认值元素会从左上角依次向右排开

flex-firection：row-reverse；项目排序就会反转 abc=>cab

flex-firection：column; 元素会从左上角纵向依次向下排开

flex-firection：column-reverse；项目排序就会反转 abc=>cba

4）flex-wrap：nowrap//默认的盒子排列的顺序明显已经超过父级元素的宽度但是有了这个属性，后期项目会自动的将子元素分成等容器宽度不会进行换行

讯享网<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            width: 500px;
            height: 500px;
            background-color: pink;
            display: flex;
            flex-wrap:nowrap;        }
        div>div{
            width: 300px;
            height: 50px;
            background-color: red;
            text-align: center;
        }
       
    </style>
</head>
<body>
    <div class="a">
        <div class="b">a</div>
        <div class="c">b</div>
        <div class="d">c</div>
    </div>
</body>
</html>

代码中的子元素宽度已经超过了父元素！但是加了这个属性我们来看下这个效果！

并没有向下换行而是进行了等比例的缩小！

flex-wrap：wrap 项目会进行自身宽度进行排列，不会进行约束

给项目的属性

1）order属性用于项目的排列顺序数值越小项目属性越靠前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            width: 500px;
            height: 500px;
            background-color: pink;
            display: flex;
            flex-wrap:nowrap;        }
        div>div{
            width: 300px;
            height: 50px;
            background-color: red;
            text-align: center;
        }
        .b{
            order: 1;
        }
        .d{
            order: 2;
        }
        .c{
            order: 0;
        }
       
    </style>
</head>
<body>
    <div class="a">
        <div class="b">B</div>
        <div class="c">C</div>
        <div class="d">D</div>
    </div>
</body>
</html>

数值越小就会在前面！

2）flex-grow：0；默认为0！空间剩余的话，会让这个属性值为1的项目进行放大！

flex-shrink：1；是1的情况下，当空间不足的时候！会进行缩小

flex-basis：auto；默认宽度；如果设置了flex-basis：80px；会覆盖原有的width属性；

基础概念

Flex的属性

给父级容器的属性 1）display：flex；元素会从左上角横向依次向右排开

给项目的属性

相关推荐

给父级容器的属性
1）display：flex；元素会从左上角横向依次向右排开