Flex布局

作者: 意蜀 | 来源:发表于2019-06-09 09:25 被阅读12次

flex布局
初见FLEX
Flex 布局教程
css flex布局详解
Flex
flex布局学习笔记
6Flex 布局
css flex
Flex布局（语法篇）
Day02_flex布局

什么是flex布局呢？flex布局也称作是响应式布局，它具有灵活性和敏捷性。当你给一个容器加上这条display:flex，就意味着它是一个flex容器，也就意味着它的后代的子元素也就成为该flex容器的member。
这个容器会自默认有2个轴，一个叫做主轴，一个是与主轴垂直的交叉轴。但是默认它的方向是沿着主轴排列。

属性

flex-direction代表着该flex容器内的主轴的方向，它的取值有4种。

column:即它的主轴方向是按列排，即主轴，也就是它的子元素的排列方向。

image.png
row:代表沿着主轴方向是按行排，即交叉轴。

image.png
column-reverse:代表沿着与主轴方向相反排列

image.png
row-reverse:代表沿着与交叉轴方向相反排列

image.png
2.flex-wrap默认值是nowrap表示不换行。
nowrap表示在该轴线不换行，如果该轴线的长度没有这4个盒子的宽度大，则盒子缩小其宽度，使其在其他条件满足的情况下（例如margin）平分该轴线的长度

image.png


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div{
            height:300px;
            width: 200px;
            background-color: gainsboro;
            display: flex;
            flex-wrap: nowrap;
        }
        .div1{
            height: 100px;
            margin-top: 10px;
            margin-left: 10px;
            width: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="div">
    <div class="div1">1</div>
    <div class="div1">2</div>
    <div class="div1">3</div>
    <div class="div1">4</div>
</div>
</body>
</html>

image.png

wrap表示该轴线排不下的时候换行
image.png
wrap-reverse换行且第一行在下方
image.png
3.flex-flow是flex-direction和flex-wrap的简写
用法为：flex-flow:column wrap,默认值为flex-flow:row nowrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div{
            height:300px;
            width: 800px;
            background-color: gainsboro;
            display: flex;
            flex-flow: column wrap;
        }
        .div1{
            height: 100px;
            margin-top: 10px;
            margin-left: 10px;
            width: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="div">
    <div class="div1">1</div>
    <div class="div1">2</div>
    <div class="div1">3</div>
    <div class="div1">4</div>
</div>
</body>
</html>

image.png
4.align-items规定了其在交叉轴的对齐方式。

stretch：如果盒子未设置高度或设为auto，将占满整个容器的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div{
            height:300px;
            width:900px;
            background-color: gainsboro;
            display: flex;
            flex-direction: row;
            align-items:stretch;
        }
        .div1{
            /* height: 100px; */
            margin-top: 10px;
            margin-left: 10px;
            width: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="div">
    <div class="div1">1</div>
    <div class="div1">2</div>
    <div class="div1">3</div>
    <div class="div1">4</div>
</div>
</body>
</html>