Flex布局

YourLie_in_April

已于 2022-04-13 08:40:01 修改

阅读量375

点赞数 1

分类专栏： HTML、CSS 文章标签：前端

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

本文链接：https://blog.csdn.net/YourLie_in_April/article/details/124124407

版权

HTML、CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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;
}

总结：望各位大佬指正。

YourLie_in_April

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex布局

flex：弹性布局。（可以控制元素的对齐、排列，而且可以自动计算布局内元素的尺寸，控制元素在页面的布局方向，按照不同的排序方式对屏幕上的元素重新排序。）display : flex;块级元素。display : inline-flex;行内元素。flex-direction: 定义排列顺序（默认从左到右row）。flex-direction: row-reverse;右到左。flex-direction: column;上到下。flex-direction: column-rev..
复制链接

扫一扫