弹性盒子 display:flex

css弹性盒子 display:flex 属性

<style>
    .box {
        height: 300px;
        background-color: red;
        /*将容器转换为弹性盒子*/
        display: flex;
        /* 
            flex-start -> 默认值；主轴方向开始
            center -> 居中 
            flex-end -> 主轴的末尾 
            space-around -> 每一项两边的空间（外边距）相同（不算叠加空间）
            space-between -> 两端对齐
            space-evenly -> 均匀分布
        */
        justify-content: center;
        /*  flex-direction 控制主轴方向  默认水平从左到右
            row -> 默认值
            row-reverse -> 从右到左排列
            column -> 竖向排列 从上到下
            column-reverse -> 竖向排列 从下到上
        */
        flex-direction: row;
        /*  flex-wrap    当主轴上的内容超出主轴时，元素是否换行
            no-wrap    默认值 不换行
            wrap   换行
        */
        flex-wrap: wrap;
        /*  align-items 所有项在交叉轴上排列方式
            stretch -> 默认值 拉伸（子项没有高度/宽度时拉伸）
            flex-start -> 头对齐
            flex-end -> 尾对齐
            center -> 居中对齐
            baseline -> 基于文字基线（自己查找）
        */
        align-items: baseline;
        /*  align-content  控制交叉轴上的元素排列方式
            center -> 居中 
            flex-end -> 交叉轴的末尾 
            space-around -> 每一项两边的空间（外边距）相同（不算叠加空间）
            space-between -> 两端对齐
            space-evenly -> 均匀分布
        */
        align-content: center;
    }
    .box div {
        /* width: 100px; */
        height: 100px;
        background-color: pink;
        /* 当值不为0时，主轴上有空余空间，允许元素放大 */
        flex-grow: 1;
        /* 值为0不可以缩小，为1可以缩小 */
        flex-shrink: 1;
        /* 设置基础值（宽或高） */
        flex-basis: 100px;
        /* flex -> flex-grow,flex-shrink,flex-basis */
        flex: 1 0 100px;
        border: 1px solid yellow;
    }
    .box div:nth-child(2) {
        flex-grow: 2;
    }
    .two {
        /* order 控制所有项的顺序，默认是0，值越大越靠后，值越小越靠前 */
        order: 0;
    }
</style>
<body>
    <div class="box">
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
    </div>
</body>

元素水平垂直居中

<style>
    .box {
        display: flex;
        width: 500px;
        height: 500px;
        background-color: aqua;
        align-items: center;
        justify-content: space-evenly;
    }
    .box_div {
        width: 50px;
        height: 50px;
        background-color: antiquewhite;
    }
</style>
<body>
    <div class="box">
        <div class="box_div"></div>
    </div>
</body>

案例：两端固定，中间自适应

<style>
    .main {
        display: flex;
        height: 500px;
        border: 1px solid red;
        justify-content: space-between;
    }
    .left,
    .right {
        /* flex -> flex-grow,flex-shrink,flex-basis */
        flex: 0 0 100px;
        border: 1px dashed green;
    }
    .content {
        /* flex -> flex-grow,flex-shrink,flex-basis */
        flex: 1;
        /*  align-self 单独项排列方式
            stretch -> 默认值 拉伸（子项没有高度/宽度时拉伸
            flex-start -> 头对齐
            flex-end -> 尾对齐
            center -> 居中对齐
            baseline -> 基于文字基线（自己查找）
        */
        align-self: center;
        background-color: aqua;
    }
</style>
<body>
    <div class="main">
        <div class="left"></div>
        <!-- lorem   自动生成垃圾文字 -->
        <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum natus in vel, minima
            dolores nulla at aliquid architecto exercitationem quam odio repellendus enim quis eligendi impedit ab?
            Explicabo, iste nam?</div>
        <div class="right"></div>
    </div>
</body>

 

posted @ 2022-11-22 10:20  默永  阅读(33)  评论(0)  编辑  收藏  举报