CSS伸缩布局

1. 伸缩布局应用:

伸缩布局应用
主轴： Flex容器的主轴用来配置Flex项目，默认是水平方向
侧轴： 与主轴垂直的轴称为侧轴，默认还是垂直方向
方向： 默认是主轴从左向右， 侧轴默认是从上到下

主轴和侧轴并不是固定不变的 通过flex-direction可以互换

min-width 设置px 到达设置的这个值就不在缩放了 
max-width 跟上面这个相反
flex 可以放在每个盒子里面自由调整

需要给盒子添加display: flex;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        section {
            width: 80%;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
            /*给父级盒子添加flex*/  
            display: flex;  /*伸缩布局模式*/
        }
        section div {
            
            height: 100%;
            flex: 1;  /*每个子盒子占的份数*/

        }
        section div:nth-child(1) {
            background-color: pink;
        }
        section div:nth-child(2) {
            background-color: purple;
            margin: 0 5px;
        }
        section div:nth-child(3) {
            background-color: pink;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

View Code

2. 伸缩盒子设置固定宽度

section div:nth-child(1) {
            background-color: pink;
            width: 300px;
        }
        section div:nth-child(2) {
            background-color: purple;
            margin: 0 5px;
            flex: 1;
        }
        section div:nth-child(3) {
            background-color: pink;
            flex: 2;
        }
伸缩的时候2和3可以伸缩  1不会变

3.伸缩布局的排列方式

flex-direction: colomn; 列布局

flex-direction: colomn；行布局


section {
            width: 80%;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
            /*给父级盒子添加flex*/  
            display: flex;  /*伸缩布局模式*/
            min-width: 500px;
            flex-direction: column;
        }

协程布局案列：

案例之协程
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        body {
            min-width: 320px;
            max-width: 540px;
            margin: 0 auto;
        }
        header {
            width: 100%;
            height: 100px;
        }
        header img {
            width: 100%;
            height: 100%;
        }
        nav {
            padding: 5px;
        }
        .row {
            height: 90px;
            width: 100%;
            background-color: #ff697a;
            border-radius: 8px;
            display: flex;
            margin-bottom: 5px;
        }
        nav .row:nth-child(2) {
            background-color: #3d98ff;
        }
        nav .row:nth-child(3) {
            background-color: #44c522;
        }
        nav .row:nth-child(4) {
            background-color: #fc9720;
        }
        .row3 {
            flex: 1;
            border-left: 1px solid #fff;
        }
        row div:first-child {

        }
        .hotel {
            display: flex;
            flex-direction: column;
        }
        .hotel a {
            flex: 1;
            font-size: 16px;
            color: #fff;
            text-align: center;
            line-height: 45px;
            text-decoration: none;
            text-shadow: 0 1px 2px rgba(0,0,0, .3)

        }
        .hotel a:first-child {
            border-bottom: 1px solid #fff;
        }

    </style>
</head>
<body>
    <header>
        <img src="image/ctrip.jpg" alt="">
    </header>
    <nav>
        <div class="row">
            <div class="row3"></div>
            <div class="row3 hotel">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="row3 hotel">
                <a href="#">团购</a>
                <a href="#">客栈</a>
            </div>
        </div>

        <div class="row">
            <div class="row3"></div>
            <div class="row3 hotel">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="row3 hotel">
                <a href="#">团购</a>
                <a href="#">客栈</a>
            </div>
        </div>

        <div class="row">
            <div class="row3"></div>
            <div class="row3 hotel">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="row3 hotel">
                <a href="#">团购</a>
                <a href="#">客栈</a>
            </div>
        </div>

        <div class="row">
            <div class="row3 hotel">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="row3 hotel">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="row3 hotel">
                <a href="#">团购</a>
                <a href="#">客栈</a>
            </div>
        </div>
    </nav>
</body>
</html>

View Code

4.调整主轴对齐

justify-content 调整主轴对齐

值            描述
flex-start    让子元素从父元素的开头排序
flex-end      位于容器的结尾
center        位于容器的中心
space-between 左右贴近父盒子 中间分布空白距离
space-around  相当于给每个盒子添加了每个盒子的margin

5. 调整垂直对齐

align-items 调整垂直对齐
值         描述
stretch    让子元素的高度拉伸适应父容器（前提是子元素不给高度）
center     垂直居中
flex-start 垂直对齐开始位置
flex-end   垂直对齐结束位置

6. 控制是否换行

nowrap:  不换行 相当于强制一行显示 默认是这个
wrap     自动换行
wrap-reverse

7. 多行调整垂直对齐

align-content堆栈 针对flex里面多轴的情况下，align-items是针对一行的
必须对父亲设置display: flex;
flex-direction： row; 方式为横向排列 以及flex-wrap: wrap; 

strech 
center
flex-start
flex-end
space-between
space-around    属性作用跟align-items的一样

order控制子盒子的前后顺序
数值越小越往前 可以写负数 默认是0

猜你喜欢