厦门 网站建设企业邮箱,中国营销在线网,企业培训考试系统,seo搜索引擎优化一、理解flex 二、理解Flex布局#xff08;又称Flexbox布局#xff09;
Flex布局#xff08;又称Flexbox布局#xff09;是一种基于Web的CSS3布局模式#xff0c;其目的是为了更加灵活和自适应地布置各种各样的网页元素。Flex布局通过将一个父容器分割为一个或多个弹性项…一、理解flex 二、理解Flex布局又称Flexbox布局
Flex布局又称Flexbox布局是一种基于Web的CSS3布局模式其目的是为了更加灵活和自适应地布置各种各样的网页元素。Flex布局通过将一个父容器分割为一个或多个弹性项目使得这些项目能够按照一定规则相互排列并且自动适应它们所处的容器环境。
在Flex布局中父容器成为“flex container”子元素成为“flex item”。Flex容器有两个重要的属性flex-direction和justify-content。flex-direction主要用来决定flex item在主轴上的排列方向而justify-content则用来对flex item进行主轴方向上的对齐。
除了这些基本属性之外Flex布局还具有许多其他的属性例如align-items、align-content、flex-wrap、order、flex-grow、flex-shrink等。这些属性用来定义flex item在交叉轴和主轴上的排序方式以及它们在父容器中所占的空间大小。
flex布局是一种比较高级的网页排版技术它能够帮助开发者轻松地实现复杂的网页布局效果并且具有灵活和响应式的特点。
三、设置了 flex 布局后以下属性将失效
序号属性备注1float2clear3vertical-align在 Flex 容器中只能用于对齐 Flex 项目中的内联元素或文字4display:inline-block5width可以在 Flex 项目上设置6height可以在 Flex 项目上设置7margin: auto在 Flex 容器上无法将 Flex 项目水平居中需要使用justify-content:center实现8flex-direction: row该属性被设置为默认值flex-direction: row如果需要更改主轴方向应该使用flex-direction属性9flex-wrap: nowrap该属性被设置为默认值flex-wrap:nowrap如果需要实现换行或不换行应该使用flex-wrap属性10justify-content: flex-start该属性被设置为默认值如果需要更改主轴方向上的对齐方式应该使用justify-content属性注意这并不是绝对的还取决于具体的属性值和 Flex 项目的结构。有些情况下上述属性仍然可以正常使用
四、Flex布局有以下核心概念
4.1、Flex容器Flex Container应用了 Flex 布局的元素称为 Flex 容器。其作用是定义 Flex 项目所在的容器使 Flex 项目能够进行弹性布局。
4.2、Flex项目Flex ItemFlex 容器中的子元素称为 Flex 项目Flex Item每个 Flex 项目都具有弹性盒的属性。同时它们也受到 Flex 容器的限制如放置的方向、排列顺序等。
4.3、Flex轴Main AxisFlex 容器主要的放置方向即为 Flex 轴。在该轴上Flex 容器中的 Flex 项目会被依次排列。
4.4、Flex交叉轴Cross Axis与 Flex 轴垂直的轴称为 Flex 的交叉轴。在该轴上Flex 项目所占据的空间是有限制的具体大小由 Flex 容器的属性决定。
4.5、主轴方向属性justify-content该属性用于控制 Flex 项目在 Flex 轴上的对齐方式。它可以让 Flex 项目在主轴方向上看起来更加美观通常被用于实现水平对齐或垂直对齐。
4.6、交叉轴方向属性align-items该属性用于控制 Flex 项目在交叉轴上的对齐方式。它可以让 Flex 项目在交叉轴方向上看起来更加美观通常被用于实现水平对齐或垂直对齐。
4.7、弹性元素属性flex该属性用于控制 Flex 项目如何分配 Flex 容器中可用空间。该属性的值决定了 Flex 项目的伸缩性它能够让 Flex 项目在 Flex 容器中的尺寸发生变化以适应不同的屏幕尺寸或者容器大小。 五、Flex容器
Flex容器是包含Flex项目的父级元素通过设置该元素的display属性为flex或inline-flex即可创建一个Flex容器。
序号属性属性描述值值描述1display指定容器为Flex布局flex主轴水平方向排列inline-flex主轴垂直方向排列2flex-direction指定主轴的方向row从左到右row-reverse水平方向从右到左column垂直方向从上到下column-reverse垂直方向从下到上3justify-content指定主轴上的对齐方式flex-start靠近起点对齐flex-end靠近终点对齐center居中对齐space-between两端对齐space-around间隔对齐4align-items指定交叉轴上的对齐方式flex-start靠近起点对齐flex-end靠近终点对齐center居中对齐baseline基线对齐stretch拉伸对齐5align-content指定多根轴线的对齐方式(仅当交叉轴为多根轴线时有效)flex-start多行项目对齐于交叉轴的起始位置flex-end多行项目对齐于交叉轴的结束位置center多行项目在交叉轴上居中对齐space-between多行项目在交叉轴上平均分布首尾项目对齐于容器两端项目之间的距离相等。space-around多行项目在交叉轴上平均分布项目之间的距离相等首尾项目距离容器两端的距离是其他项目之间距离的一半stretch多行项目在交叉轴上拉伸以充满容器的高度。6flex-wrap指定元素是否换行nowrap不换行wrap换行wrap-reverse反向换行7flex-flow用于同时设置 flex 容器的主轴和交叉轴的方向和排列方式它是 flex-direction 和 flex-wrap 两个属性的缩写row主轴为水平方向起点在左端row-reverse主轴为水平方向起点在右端column主轴为垂直方向起点在上方column-reverse主轴为垂直方向起点在下方wrap换行第一行在上方wrap-reverse换行第一行在下方nowrap不换行所有元素排在一行上inherit从父元素继承值8align-self设置单个项目在交叉轴上的对齐方式auto默认值元素继承父元素在交叉轴方向上的对齐方式flex-start元素在交叉轴的起点对齐flex-end元素在交叉轴的终点对齐center元素在交叉轴的中心对齐baseline元素在交叉轴上以基线对齐stretch将元素在交叉轴上拉伸至撑满整个交叉轴
六、Flex项目
Flex项目是Flex容器中的子元素通过设置该元素的flex属性即可使其成为一个Flex项目。
序号属性属性描述1justify-content控制项目在主轴上的对齐方式2align-items控制项目在交叉轴上的对齐方式3flex-direction控制主轴的方向4flex-wrap控制项目在一行内排列不下时的换行方式5align-content控制多行项目在交叉轴上的对齐方式6flex-grow表示Flex项目在空间分配时的放大比例。 flex-grow的默认值为0数值越大空间分配越多。7flex-shrink表示Flex项目在空间不足时的缩小比例。 flex-shrink的默认值为1数值越大缩小比例越多设置为 0 不缩放 。8flex-basis表示Flex项目在空间分配前的初始大小。 flex-basis的默认值为auto可以设置具体数值或百分比。9order表示Flex项目在容器中的排列顺序。 order的默认值为0数值越小排列越靠前。可以使用负数值。10flex是flex-grow, flex-shrink 和flex-basis的缩写可以一次性设置以上三个属性 是flex-gflex的默认值为0 1 auto。
七、DEMO / vue3.3 ts
7.1、水平、垂直 居中 templatediv classcontainer!-- 水平、垂直 居中 --div classflexdiv classflex_item/div/div/div
/templatescript setup langts
/scriptstyle scoped langless
.container{.flex{display: flex;justify-content: center; // 水平居中align-items: center; // 垂直居中width: 200px;height: 200px;background: #ff0000;_item{width: 50px;height: 50px;background: #b3de1b;}}
}
/style7.2、flex-shrink templatediv classcontainerdiv classflexdiv classflex_item1/divdiv classflex_item2/divdiv classflex_item3/divdiv classflex_item4/divdiv classflex_item5/divdiv classflex_item6/divdiv classflex_item7/div/div/div
/templatescript setup langts
/scriptstyle scoped langless
.container{.flex{display: flex;width: 200px;height: 200px;background: #ff0000;_item{width: 50px;height: 50px;background: #b3de1b;flex-shrink: 0; // 表示Flex项目在空间不足时的缩小比例。flex-shrink的默认值为1数值越大缩小比例越多设置为 0 不缩放 。}}
}
/style7.3、flex-wrap: wrap; / 换行 7.4、 align-content: flex-start; / 多行项目对齐于交叉轴的起始位置 八、过程记录
8.1、display flex 和 inline-flex区别
displayflexinline-flex布局方向不同display:flex是主轴水平方向排列display:inline-flex是主轴垂直方向排列元素占用空间不同display:flex元素会占据一行即父元素宽度display:inline-flex元素只占据它所包含内容的空间默认属性不同display:flex默认属性是flex-direction:rowdisplay:inline-flex默认属性是flex-direction:row-reverse元素排列方式不同display:flex元素默认排列方式为flex-startdisplay:inline-flex元素默认排列方式为baseline
参考链接
Flex 布局语法教程 | 菜鸟教程
30 分钟学会 Flex 布局 - 知乎
flex布局详解_杰杰坚强的博客-CSDN博客
flex布局详细教程
处理end value has mixed support, consider using flex-end instead_星月I随心的博客-CSDN博客
