技术分享-弹性布局

最新推荐文章于 2024-11-11 13:13:28 发布

qiqiqiqiq_

最新推荐文章于 2024-11-11 13:13:28 发布

阅读量118

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qiqiqiqiq_/article/details/134489515

版权

1.什么是flex

flex布局是常用的自适应布局技术，全称是弹性盒子——“FlexibleBox”，用来弹性布局。

又称伸缩布局，伸缩盒布局，弹性盒布局，flex布局。

2.主轴和交叉轴

main axis：主轴。
cross axis：交叉轴，与主轴垂直的轴。

3.常见父项属性

flex-direction：设置主轴方向
justify-content：设置子元素在主轴上的排列方式
align-items：设置子元素在侧轴上的排列方式
flex-wrap：设置子元素是否换行

4.flex-direction

flex-direction属性决定了主轴的方向（子元素的排列方向）

row（默认）：主轴为水平方向，从左到右。
row-reverse：主轴为水平方向，从右到左。
column：主轴为垂直方向，从上到下。
column-reverse：主轴为垂直方向，从下到上。

5.justify-content

定义了项目在主轴上的对齐方式。主轴（flex-direction）为默认的row，即水平方向，从左到右。

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端先对齐，再平分中间剩余空间。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-flow小案例</title>
    <style>
       section {
        display: flex;
        width: 80%;
        height:200px;
        border: 2px solid black;
        margin: 0 auto;
        justify-content: space-between;
       }
       section div:nth-child(1){
        width: 100px;
        height: 150px;
       
        background-color:green;
       }
       section div:nth-child(2){
        width: 100px;
        height: 150px;
        
        background-color: pink;
       }
       section div:nth-child(3){
        width: 100px;
        height: 150px;
        background-color: blue;
       }
       section div:nth-child(4){
        width: 100px;
        height: 150px;
        background-color: red;    
       }
    </style>
</head>
<body>
<section>
    <div>我是A号</div>
    <div>我是B号<</div>
    <div>我是C号<</div>
    <div>我是D号<</div>
</section>
</body>
</html>