Flex布局

原创已于 2022-04-13 08:40:01 修改 · 508 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-04-12 15:19:50 首次发布

HTML、CSS 专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨了Flex布局，包括其基本概念、属性使用及实战示例。通过调整`display`、`flex-direction`、`flex-wrap`、`justify-content`和`align-items`等属性，实现元素在不同设备上的灵活布局。实例展示了如何利用Flex布局设计一款产品展示模块，适用于前端开发者提升布局能力。

flex：弹性布局。（可以控制元素的对齐、排列，而且可以自动计算布局内元素的尺寸，控制元素在页面的布局方向，按照不同的排序方式对屏幕上的元素重新排序。）

display : flex;块级元素。

display : inline-flex;行内元素。

flex-direction: 定义排列顺序（默认从左到右row）。

flex-direction: row-reverse; 右到左。

flex-direction: column; 上到下。

flex-direction: column-reverse; 下到上。

flex-wrap: 定义是否换行（默认不换行no-wrap）。

flex-wrap: wrap; 换行。

flex-wrap: wrap-reverse; 反转换行。

flex-flow: row-reverse wrap; 主轴选择与换行的连写属性。（依据具体情况选择是否需要简写。）

justify-content: 定义对齐方式（默认start对齐）。（建议子元素不要设置margin，会对对齐方式有影响。）

justify-content: end; end对齐。

justify-content: center; 居中对齐。

justify-content: space-between; 两端对齐。

justify-content: space-around; 盒子两端间隔相等，两个盒子之间距离为两倍。（不受margin影响）

justify-content: space-evenly; 盒子与盒子和边框间距相等。（会受到margin的影响）

align-items: 定义交叉轴上的对齐方式（默认为stretch如果未设置高度，将占满整个高）。

align-items: flex-end; 交叉轴的终点对齐。

align-items: center; 交叉轴中点对齐。

align-items: baseline; 盒子第一行文字对齐（需要给第一行第一个文字设置行高）

align-items: flex-start;起点对齐

小练习：

<!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>Document</title>
    <link rel="stylesheet" href="./demo1.css">
</head>
<body>
    <div class="box">
        <div class="left">
            <img src="./images/s8.jpg">
        </div>
        <div class="right">
            <div>三星 Galaxy S8 (6G 64G)谜夜黑</div>
            <div>
                <span>总人数9999</span>
                <span>已购人数9933</span>
            </div>
            <a href="#">立即购买</a>
        </div>
    </div>
</body>
</html>

样式：

*{margin: 0;padding: 0;}
.box{
    width: 876px;
    height: 292px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    margin: 50px auto;
}
.box .left img{
    display: block;
}
.box .right{
    width: 608px;
    height: 292px;
}
.box .right div{
    margin-left: 15px;
    margin-top: 30px;
}
.box .right div:nth-of-type(1){
    font-size: 24px;
    line-height: 20px;
}
.box .right div:nth-of-type(2){
    line-height: 20px;
}
.box .right div span:nth-of-type(2){
    margin-left: 20px;
}
.box .right a{
    display: block;
    margin-left: 15px;
    margin-top: 30px;
    width: 145px;
    background: #87CEEA;
    color: white;
    font-weight: 700;
    line-height: 52px;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
}

总结：望各位大佬指正。