flex布局

陳Emily

已于 2022-09-22 18:48:30 修改

阅读量83

点赞数

文章标签： css css3 前端

于 2022-09-22 18:22:37 首次发布

本文链接：https://blog.csdn.net/weixin_45418495/article/details/126996679

版权

Flex 布局教程：语法篇 - 阮一峰的网络日志

flexible缩写弹性盒子用于网页布局排版

采用网页布局的元素，称为flex容器，内部元素称为flex项目。

1.容器默认两根轴，水平：主轴，垂直：交叉轴。

主轴：main start/main end

交叉轴：cross start/cross end

2.容器的属性：（6）

你记住了吗？？？

flex-direction row column row-reverse column-reverse
flex-wrap nowrap wrap wrap-reverse
flex-flow row nowrap
justify-content flex-start. flex-end center space-between space-around

align-items flex-start：交叉轴的起点对齐flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch 默认（充满）

align-content flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）

3.项目属性（5）

order 排序
flex-grow 放大默认0 0时不变
flex-shrink 缩小。默认1 无负值
flex-basis。分配多余空间之前，项目占据的主轴空间（main size）
flex 前三者默认 0 1 auto。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self 不同

4.辨析：

justify- content

与 align-content

align-items

与 align-content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
    display: flex;
    height: 800px;
    width: 400px;
    background-color: rgb(219, 219, 219);
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
}
.item{
    width: 200px;
    height: 200px;
    font-size: 1.5rem;
    /* 禁止收缩 */
    flex-shrink: 0;
}
.item1{
    flex-shrink: 1;
}
.item2{
    flex-shrink: 0;
}
.item3{
    flex-shrink: 3;
}
/*  container 容器的宽度是 400,3个字元素总宽度是 600 超过了 200
    然后按照比例缩小到这些元素上 200/4 = 50
    item1 缩小 50 * 1 = 50,还剩 150
    item2 不缩小
    item3 缩小 50 * 3 = 150 还剩 50
 */

</style>
<body>
    <div class="container">
        <div class="item item1" style="background-color: antiquewhite;">1</div>
        <div class="item item2" style="background-color: aqua;">2</div>
        <div class="item item3" style="background-color: aquamarine;">3</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
    display: flex;
    height: 600px;
    background-color: rgb(219, 219, 219);
}
.container{
    /* justify-content: flex-start; */
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    /* justify-content: space-around; */
    justify-content: space-evenly;
}
.item{
    padding: 100px;
}
</style>
<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
    </div>
</body>
</html>