Flex布局知识

vGuYi

已于 2022-05-21 21:19:27 修改

阅读量121

点赞数 2

文章标签： css css3 前端

于 2022-05-14 21:13:10 首次发布

本文链接：https://blog.csdn.net/vGuYi/article/details/124773688

版权

FLex布局优点:

1.是一种浏览器提倡的布局模型

2. 布局网页更简单、灵活

3.避免浮动脱标的问题

设置方式:

父元素添加 display: flex ，子元素可以自动的挤压或拉伸

主轴对齐方式:

使用 justify-content 调节元素在主轴的对齐方式

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

justify-content: center;

侧轴对齐方式 :

使用align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性:

align-items（添加到弹性容器-父级,设置单行）align-content(设置多行)

align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子-子级）

属性值	作用
flex-start	起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认效果 , 弹性盒子沿着侧轴线被拉伸至铺满容器

让盒子居中

<style>
        .box {
            width: 300px;
            height: 300px;
            background-color: darkturquoise;
            /* 主轴和侧轴都居中对齐 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box>div {
            height: 100px;
            width: 100px;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
    </div>
</body>

伸缩比:

使用flex属性修改弹性盒子伸缩比

属性

flex : 值;

取值分类

数值(整数)

注意:

1. 只占用父盒子剩余尺寸

2. 是给子盒子添加这个属性

圣杯布局知识

主轴方向

使用 flex-direction 改变元素排列方向

主轴默认是水平方向 , 侧轴默认是垂直方向

属性值	作用
row	行, 水平(默认值)
column	* 列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

弹性盒子换行

使用 flex-wrap 实现弹性盒子多行排列效果

 <style>
        .box {
            width: 800px;
            height: 400px;
            background-color: chartreuse;
            display: flex;
            /* 使用换行 */
            flex-wrap: wrap;
            align-content: space-evenly;
        }

        .box>div {
            width: 200px;
            height: 100px;
            background-color: aqua;
        }

        .box>div:nth-child(2n+1) {
            background-color: cornflowerblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</body>

Flex兼容性查看

Flex布局教程

vGuYi

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Flex布局知识

FLex布局优点:1.是一种浏览器提倡的布局模型 2.布局网页更简单、灵活 3.避免浮动脱标的问题设置方式:父元素添加 display: flex，子元素可以自动的挤压或拉伸主轴对齐方式:使用justify-content调节元素在主轴的对齐方式属性值作用 flex-start 默认值, 起点开始依次排列 flex-end 终点开始依次排列 ce.
复制链接

扫一扫