9.13学习
一、flex是什么？
flex是CSS3中引入的一种布局模式，也称为弹性布局。使用flex布局可以快速、灵活地实现各种复杂的布局。
在css中有三种盒子，标准盒子、IE盒子(怪异盒子)。他们的差异在于计算盒子的尺寸时的差异。
| 盒子 | 描述 | 属性值 |
|---|---|---|
| 标准盒子 | 在设置内边距或有边框的情况自身的盒子会撑大 | box-sizing: content-box; |
| ie盒子(怪异盒子) | 在设置内边距或有边框的情况自身的盒子不会撑大（但是在内容超出了自身内容的情况下会撑大） | box-sizing: border-box; |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
width: 300px;
height: 200px;
background-color: pink;
/* box-sizing: content-box; */
}
.box2 {
width: 300px;
height: 200px;
padding: 50px;
background-color: orange;
/* box-sizing: border-box; */
}
</style>
</head>
<body style="height: 2000px;">
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
可以看到box2把自身的内容缩小了，但盒子自身的大小不变。
flex布局基于容器和子元素两个概念。如图
以下是具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.boss {
width: 600px;
height: 200px;
border: 1px solid red;
display: flex;
}
.boxx1 {
width: 100px;
height: 100px;
background-color: pink;
flex: 2;
}
.boxx2 {
width: 100px;
height: 100px;
background-color: orange;
flex: 8;
}
.boxx3 {
width: 100px;
height: 100px;
background-color: green;
flex: 2;
}
</style>
</head>
<body style="height: 2000px;">
<div class="boss">
<div class="boxx1">1111111</div>
<div class="boxx2">2222222</div>
<div class="boxx3">3333333</div>
</div>
</body>
</html>
其中父元素必须设置display: flex;。然后子元素设置flex。可以看到boxx1和boxx3都设置了2等份，boxx2设置了8等份，最大为12等份。
二、flex的属性。
| 属性 | 描述 | 几个常用属性值 |
|---|---|---|
| flex-direction | 属性指定了弹性子元素在父容器中的位置 | 4个属性值 |
| justify-content | 设置主轴(x轴)上的对齐方式 | 5个属性值 |
| align-items | 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式(并齐) | 5个属性值 |
| flex-wrap | 是一个用于设置交叉轴（y轴）方向上的对齐方式的属性(换行) | 3个属性值 |
| align-content | 是一个用于控制多行项目在交叉轴（y轴）方向上对齐方式的属性(用于修改 flex-wrap 属性的行为) | 6个属性值 |
| flex-flow | flex-direction和flex-wrap的复合属性(可同时控制主轴和交叉轴方向上的布局方式) | 2个属性值 |
| order | 弹性子元素，排序，用整数值来定义排列顺序，数值小的排在最前面，可以 为负值，属性设置弹性容器内弹性子元素属性 | 属性值为数字 |
| align-self | 是一个用于控制单个 flex 项目在交叉轴上的对齐方式的属性(在子容器中使用) | 5个属性值 |
1.flex-direction属性。
以下的属性都在父级上使用，需要在子元素使用的话我会特别标注。
-
row
默认值，从左往右默认的排序。
-
row-reverse
与 row 相同，但是以相反的顺序。
-
column
灵活的项目将垂直显示，正如一个列一样。
-
column-reverse
与 column 相同，但是以相反的顺序。
以下是这些属性使用的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试代码</title>
<style>
#main {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-direction: column-reverse;
}
.box1{
width: 50px;
height: 50px;
}
.box2{
width: 50px;
height: 50px;
}
.box3{
width: 50px;
height: 50px;
}
.box4{
width: 50px;
height: 50px;
}
.box5{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="main">
<div class="box2" style="background-color:coral;">A</div>
<div class="box3" style="background-color:lightblue;">B</div>
<div class="box4" style="background-color:khaki;">C</div>
<div class="box5" style="background-color:pink;">D</div>
<div class="box1" style="background-color:lightgrey;">E</div>
</div>
</body>
</html>
2.justify-content属性（x对齐方式）。
- flex-start
默认值。从行首起始位置开始排列。
- flex-end
从行尾位置开始排列。
- center
居中排列。
- space-between
均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。
- space-around
均匀排列每个元素，每个元素周围分配相同的空间。(a和c的最外边加起来等于ab中间的位置)
3.align-items属性（y对齐方式）。
- flex-start
和上面一样，也属于默认值。默认排序。 - flex-end
以y轴在底部对齐。
- center
以y轴在中间对齐
- baseline
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
（类似于默认） - stretch
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。（类似于默认个人理解）
4.flex-wrap（换行）
-
nowrap
默认值，弹性容器为单行，默认显示在一行。 -
wrap
弹性盒子为多行，该情况下子项多出的溢出的部分会被放置在新行。子项会生断行。
-
wrap-reverse
反转wrap排列。
5.align-content（用于修改flex-wrap属性的行为。
- flex-start
从弹性盒子的起始位置开始堆叠。
- flex-end
各行向弹性盒容器的结束位置堆叠。
- center
各行弹性盒子的中间开始堆叠。
- space-around
均匀排列每个元素，每个元素周围分配相同的空间（两边的间距加起来等于每个元素中间的间距）
- space-between
各行在弹性盒容器中平均分布。
- stretch
默认值。各行将会伸展以占用剩余的空间。
6.flex-flow（属性是 flex-direction 和 flex-wrap 属性的复合属性）
- flex-flow
属性用于设置或检索弹性盒模型对象的子元素排列方式。 - flex-direction
属性规定灵活项目的方向。 - flex-wrap
属性规定灵活项目是否拆行或拆列。
7.order（用于子元素）
-
order 弹性子元素，排序，用整数值来定义排列顺序，数值小的排在最前面， 可以 为负值，属性设置弹性容器内弹性子元素属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试代码</title>
<style>
#main {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
}
.box1{
width: 50px;
height: 50px;
order: 5;
}
.box2{
width: 50px;
height: 50px;
order: 4;
}
.box3{
width: 50px;
height: 50px;
order: 3;
}
.box4{
width: 50px;
height: 50px;
order: 2;
}
.box5{
width: 50px;
height: 50px;
order: 1;
}
/* #main div{
width: 50px;
height: 50px;
} */
</style>
</head>
<body>
<div id="main">
<div class="box1" style="background-color:lightgrey;">A</div>
<div class="box2" style="background-color:coral;">B</div>
<div class="box3" style="background-color:lightblue;">C</div>
<div class="box4" style="background-color:khaki;">D</div>
<div class="box5" style="background-color:pink;">E</div>
</div>
</body>
</html>
order数值最小的排前面。
8.align-self（对齐方式，在子元素上使用）
- auto
默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。 - flex-start
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。 - stretch
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
三、总结
以上就是我今天的笔记总和，谢谢你的观看！
- 打卡9.17
1909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
