zoukankan      html  css  js  c++  java
  • 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;
                 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 { 80%; height: 200px; border: 1px solid pink; margin: 100px auto; /*给父级盒子添加flex*/ display: flex; /*伸缩布局模式*/ min- 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
  • 相关阅读:
    670. Maximum Swap
    653. Two Sum IV
    639. Decode Ways II
    636. Exclusive Time of Functions
    621. Task Scheduler
    572. Subtree of Another Tree
    554. Brick Wall
    543. Diameter of Binary Tree
    535. Encode and Decode TinyURL
    博客园自定义背景图片
  • 原文地址:https://www.cnblogs.com/guniang/p/11937633.html
Copyright © 2011-2022 走看看