目录
1、flex布局
1.1 flex布局是什么
Flex布局是一种用于网页布局的弹性盒子模型,它可以灵活地调整元素在容器中的位置和大小。
1.2 flex布局适用范围
Flex布局适用于现代的网页布局,特别适用于响应式设计和移动设备上的布局。它提供了一种简单而强大的方式来定义和控制元素在容器中的排列方式。
1.3 父元素和子元素的关系
- Flex布局是一种用于在容器(父元素)和其内部项目(子元素)之间进行灵活的布局的CSS属性。
- 在Flex布局中,通过在父元素上设置`display: flex`或`display: inline-flex`,将其变为一个Flex容器。这样的话,Flex容器的子元素就可以使用Flex属性进行布局和排列。
- Flex布局是应用于父元素上的,它定义了子元素的行为。通过在父元素上设置各种Flex属性,如`flex-direction`、`justify-content`、`align-items`等,来控制子元素的布局方式、对齐方式和伸缩行为等。
- 子元素则通过设置各种Flex项属性,如`flex-grow`、`flex-shrink`、`flex-basis`等,来决定它们在容器中的尺寸和排列顺序。
- 所以说,Flex布局是给父元素(容器)设置的,通过对父元素设置Flex属性来控制子元素的布局和排列。
1.4 块和行内块的区别
- 盒模型属性:都可以设置宽度(width)和高度(height)属性,可以通过这些属性控制元素在页面中的大小。
- 显示属性: 块元素的默认`display`属性值为`block`,它会独占一行,并在上下方创建新的块级框。行内块元素的默认`display`属性值为`inline-block`,它会在一行内显示,并根据内容自动换行。
- 盒子模型属性的计算:块元素的宽度(width)和高度(height)属性会包括内容区域、内边距(padding)、边框(border)和外边距(margin)的计算。行内块元素的宽度(width)和高度(height)属性同样会包括内容区域、内边距(padding)、边框(border)和外边距(margin)的计算。
- 默认布局:块元素的默认布局是垂直排列,每个块元素独占一行。行内块元素的默认布局是水平排列在一行内。
总结一下就是,块元素和行内块元素的属性在大部分情况下是相似的,它们都可以设置宽度、高度、内边距、外边距等属性。然而,块元素的默认布局是独占一行,而行内块元素的默认布局是在一行内显示。此外,块元素的宽度和高度属性可以自由设置,而行内块元素的宽度和高度属性默认由内容决定。
2、flex布局的样式属性
2.1 flex-direction属性(子类在主轴上的分布)
不同属性值的排列方式
row(默认):从左往右
row-reverse:从右往左
column:从上往下
column-reverse:从下往上
2.2 justify-content属性(子类在主轴上的对齐方式)
不同属性值的排列方式
flex-start(默认值):与 main start 对齐(靠左)
flex-end:与 main end 对齐(靠右)
center:居中对齐
space-between:flex items之间的距离相等,与main start、main end两端对齐
两边顶到头,剩余空间相等
space-evenly:flex items之间的距离相等,与main start、main end之间距离等于flex items之间的距离每个元素间隔相同
space-around:flex items之间的距离相等,与main start、main end之间距离等于flex items之间的距离的一半,每个元素占相同剩余空间
注:flex-direction属性和 justify-content属性是添加在父元素上的。