初级前端的自我救赎【HTML+CSS篇】：15.flex布局

最新推荐文章于 2023-03-20 23:26:53 发布

努力更加努力

最新推荐文章于 2023-03-20 23:26:53 发布

阅读量126

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_44088319/article/details/120540023

版权

flex布局概述
此前我们制作的所有网页都是基于盒子模型和浮动布局完成的，
flex布局又叫弹性布局（或者叫弹性盒子布局）
这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。

基本概念
将元素设置为display:flex;元素会变成一个flex容器。
容器内部的元素为flex元素或者叫flex项目（flex-item) 

main axis:主轴
cross axis：交叉轴

flex容器中的默认效果

1.flex项目在flex容器中延主轴排列。
2.flex项目高度适应flex容器高度（同行内元素）


设置flex容器
flex-direction：设置flex项目排列方向
justify-content：flex项目主轴排列方式
align-items：flex项目在交叉轴的排列方式(给容器设置的属性)


flex-direction
row(默认值)：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。


justify-content （延主轴对齐方式）
flex-start(默认值)：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

align-item （延交叉轴对齐方式）
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
stretch（延伸）（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

flex项目属性
flex-grow：属性定义项目的放大比例，默认为0，空间充足，等比例补全。
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis：主轴排列为宽度，交叉轴排列为高度，设置px，默认值是auto
flex：综合上面三个样式。简写
align-self：flex项目的对齐方式（auto|flex-start|flex-end|center|baseline|stretch)
（给flex项目设置的属性）(通常用来设置一个元素)

<!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>
    <style>
        .container{
            display: flex;
            background-color: yellow;
            width: 800px;
            height: 300px;
            /* flex-direction: row;
            justify-content: space-around; */
        }

     		flex项目不会超出flex容器
            如果超出了 元素会等比地根据flex容器缩小
            flex-shrink值越大 缩小的程度越大

        .item{
            width: 300px;
            /* height: 100px; */
            background-color: red;
            border:1px solid blue;
            /* flex-grow:1; */
            flex: 1;
        }
        .big{
            /* width: 300px;
            flex-shrink: 2; */
            /* flex-grow: 3; */
            /* flex-basis: 600px; */
            flex: 2;
            height: 100px;
            align-self: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">123</div>
        <div class="item">456</div>
        <div class="item big">789</div>
        <div class="item">135</div>
        <div class="item">246</div>
    </div>
</body>
</html>

努力更加努力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初级前端的自我救赎【HTML+CSS篇】：15.flex布局

flex布局概述此前我们制作的所有网页都是基于盒子模型和浮动布局完成的，flex布局又叫弹性布局（或者叫弹性盒子布局）这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。基本概念将元素设置为display:flex;元素会变成一个flex容器。容器内部的元素为flex元素或者叫flex项目（flex-item) main axis:主轴cross axis：交叉轴flex容器中的默认效果1.flex项目在flex容器中延主轴排列。2.flex项目高度适应flex容器高度
复制链接

扫一扫