移动端布局day02

最新推荐文章于 2023-07-11 16:22:11 发布

才不是小弱鸡

最新推荐文章于 2023-07-11 16:22:11 发布

阅读量84

点赞数

分类专栏： css web

本文链接：https://blog.csdn.net/qq_40996739/article/details/108990913

版权

web 同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

0x00 flex布局

flex布局为弹性布局，可以为任意盒子指定

设定flex布局后，元素的float，clear，vertical-align属性将失效

0x01 flex-direction 设置主轴方向

元素跟着主轴排列

0x02 justify-content 设置主轴上的元素排列方式

注意是设置主轴上的元素排列方式，所以使用时一定得设置好主轴方向

0x03 flex-wrap 设置子元素是否换行

若设定为wrap（默认为nowrap），当宽度不够时则会自动调整宽度让盒子能够同行放下

0x04 align-items 设置侧轴子元素排列方式（单行）

若设定为stretch，则子盒子不要给高度，不然属性会失效

另外，当元素只有单行时本属性才有用，若元素为多行时可以使用align-content

0x05 align-content 设置侧轴子元素排列方式（多行）

单行下本属性无效，请使用align-items属性，必须子元素出现换行时才有用

0x06 flex-flow

flex-flow是flex-direction和flex-wrap的复合属性

0x07 子项属性flex

<body>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>
<style>
p {
    display: flex;
    width: 800px;
    height: 200px;
    margin: 0 auto;
    background-color: #333333;
}
p span {
    flex: 1;
    background-color: aqua;
    margin: 10px;
}
</style>