flex布局篇
在刚开始使用弹性布局时，总是记不清每种flex属性所带来的布局效果，于是自己用代码编辑了每种属性所产生的布局效果🍓，并截图出来，这样方便记忆，贴出来与大家分享🌝
概念理解
- flex布局是什么？
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。 {display: flex;} - 容器和项目是什么？
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 - 注意使用事项：
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
用图展示一下弹性容器的基本结构
以下分别是通过编辑父容器和子容器的属性来实现布局效果
(一).通过改变父容器的属性来实现布局效果
-
flex-direction属性
含义：该属性定义项目的排列方向
该属性的取值：flex-direction: row | row-reverse | column | column-reverse;
-
flex-wrap属性
含义：当项目在一条轴线上排不下时，选择是否换行
该属性的取值：flex-wrap: nowrap | wrap | wrap-reverse;
-
justify-content属性
含义：该属性定义了项目在主轴上的对齐方式。
该属性的取值：justify-content: flex-start | flex-end | center | space-between | space-around;
-
align-items属性
含义：该属性定义项目在交叉轴上如何对齐。
该属性的取值：align-items: flex-start | center | flex-end | baseline | stretch;
-
align-content属性
含义：该属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
该属性的取值：align-content: flex-start | center | flex-end | space-between | space-around | stretch;
-
flex-flow属性
含义：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式
该属性的取值：flex-flow: flex-direction | flex-wrap;默认值为row nowrap
(二).通过改变子项目的属性来实现布局效果
-
order属性
含义：该属性定义项目的排列顺序。数值越小，排列越靠前，数值越大，排列越靠后，默认为0。
该属性的取值：order: 正负整数;
-
flex-grow属性
含义：当容器宽度有剩余时，该属性定义项目的放大比例，默认为0，不放大。
该属性的取值：flex-grow: 自然数;
-
flex-shrink属性
含义：当容器宽度是明显不够时，该属性定义了项目的缩小比例，默认为1。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
该属性的取值：flex-shrink: 自然数;
-
flex-basis属性
含义：该如属性定义了在分配多余空间之前，固定项目占据的主轴空间。它的默认值为auto，即项目的本来大小。
该属性的取值：flex-basis: 长度值（如20px） | auto;
-
flex属性
含义：该属性是flex-grow, flex-shrink 和 flex-basis的简写形式，默认值为0 1 auto。
该属性的取值：三个属性的组合值; -
align-self属性
含义：该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
该属性的取值：align-self: auto | flex-start | flex-end | center | baseline | stretch;
以下是上图的相应代码，可以解开注释掉的属性值试试🐮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex布局</title>
<style>
/* --------------------------------------------------------公共部分样式-------------------------------------------------------- */
*{
margin: 0;
padding: 0;
}
.outer{
margin: 10px 20px;
}
.flex{
display: flex;
}
.half{
width: 50%;
}
h2{
padding: 10px 20px;
color: rgb(83, 62, 8);
text-align: center
}
img{
width: 33%;
height: 450px;
}
/* --------------------------------------------------------flex样式-------------------------------------------------------- */
/* 父容器 */
.container{
width: 550px;
height: 550px;
margin: 30px auto;
border: 2px dashed rgb(0, 204, 255);
display: flex;
/* flex-wrap: wrap; */
/* flex-wrap属性: nowrap | wrap | wrap-reverse 属性1*/
/* 依次对应效果为:不换行 | 换行，第一行在上方 | 换行，第一行在下方 */
/* flex-direction: column; */
/* flex-direction属性: row | row-reverse | column | column-reverse 属性2*/
/* 依次对应效果为:主轴为水平方向，起点在左端 | 主轴为水平方向，起点在右端 | 主轴为垂直方向，起点在上沿 | 主轴为垂直方向，起点在下沿 */
align-items: center;
/* align-items属性: flex-start | flex-end | center | baseline | stretch 属性3*/
/* 依次对应效果为:交叉轴的起点对齐 | 交叉轴的终点对齐 | 交叉轴的中点对齐 | 项目的第一行文字的基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度。 */
/* justify-content: space-around; */
/* justify-content属性: flex-start | flex-end | center | space-between | space-around 属性4*/
/* 依次对应效果为:左对齐 | 右对齐 | 居中 | 两端对齐，项目之间的间隔都相等 | 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 */
/* 这一属性只才会对多余的空间进行分配。 */
/* 这个是用来定义伸缩项目沿着主轴线的对齐方式。当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。
当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。 */
/* align-content: center; */
/* align-content属性: flex-start | flex-end | center | space-between | space-around | stretch 属性5*/
/* 依次对应效果为: | | | | | */
/* 该属性是在允许换行的前提下才有用 */
/* flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。 */
}
/* 子元素 */
.container .item{
background-color: pink;
border: 1px solid white;
color:rgb(243, 118, 1);
list-style: none;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
.container .item:nth-child(2n){
color: purple;
/* width: 30%; */
/* height: 70px; */
}
.item1{
/* order: 6; */
/* flex-grow:1; */
/* flex-shrink: 1; */
}
.item2{
/* order: -2; */
/* flex-grow:1; */
/* flex-shrink: 1; */
}
.item3{
/* order: 3; */
/* flex-grow:2; */
/* flex-shrink: 1; */
}
.item4{
/* order: 34 */
/* flex-grow:2; */
/* flex-shrink: 1; */
}
.item5{
/* order: 5; */
/* flex-grow:1; */
/* flex-shrink: 1; */
/* flex-basis: auto; */
/* align-self:flex-end; */
}
.item6{
/* flex-shrink: 0; */
/* flex-basis: 10px; */
}
.item7{
/* flex-shrink: 1; */
/* flex:0 1 auto */
/* flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 */
}
.item8{
/* flex-shrink: 1; */
/* align-self: flex-end; */
/* align-self: auto | flex-start | flex-end | center | baseline | stretch */
}
.item9{
/* flex-shrink: 1; */
/* align-self: flex-start; */
}
.item10{
/* flex-shrink: 1; */
}
.item11{
/* flex-shrink: 1; */
}
.item12{
/* flex-shrink: 1; */
}
.item13{
/* flex-shrink: 1; */
}
</style>
</head>
<body class="outer">
<h2>测试flex容器</h2>
<!-- 父元素为容器 -->
<ul class="container box half">
<!-- 子元素为项目 -->
<li class="item item1">1</li>
<li class="item item2">2</li>
<li class="item item3">3</li>
<li class="item item4">4</li>
<li class="item item5">5</li>
<li class="item item6">6</li>
<li class="item item7">7</li>
<li class="item item8">8</li>
<li class="item item9">9</li>
<li class="item item10">10</li>
<!-- <li class="item item8">11</li>
<li class="item item9">12</li>
<li class="item item10">13</li> -->
</ul>
</body>
</html>
1637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
