CSS3--弹性盒子(Flex Box)

最新推荐文章于 2022-09-29 17:22:30 发布

混名汪小星

最新推荐文章于 2022-09-29 17:22:30 发布

阅读量225

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/qq_28835447/article/details/97133067

版权

css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

了解掌握弹性盒子用法，利用fiex布局
1.弄清楚弹性盒子主轴（默认横向）与交叉轴（默认纵向）
2.

弹性盒子概念

对元素CSS的display属性设置flex或者inline-flex，那么这个元素就是弹性盒模型容器(flex container)，其子元素就是弹性盒模型子元素(flex item)。在容器中，水平的主轴(main axis)和垂直的交叉轴(cross axis)撑起这个弹性盒模型，对于子级元素，单个元素的主轴空间称为main size，占据的交叉空间称为cross size。
注意：

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

弹性盒子相关属性

将元素设置为弹性盒子

display：flex；

弹性盒子元素可设置属性

flex-direction 属性指定了弹性子元素在父容器中的位置（规定主轴的方向）

属性值
row	横向从左到右排列（左对齐），默认的排列方式。
row-reverse	反转横向排列（右对齐，从后往前排，最后一项排在
column	纵向排列
column-reverse	反转纵向排列，从后往前排，最后一项排在最上面

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

属性值
nowrap	默认，弹性容器为单行。该情况下弹性子项可能会溢出容器
wrap	弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生
wrap-reverse	反转 wrap 排列

flex-flow 相当于flex-wrap与flex-direction的合用
flex-flow 属性值可以为flex-direction的属性值和flex-wrap的属性值合用

写法

		display:flex;
		flex-flow:row-reverse wrap;

align-content 属性用于修改 flex-wrap 属性的行为。交叉轴上的多行对齐方式（设置多行）

属性值
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”
stretch	默认值。元素被拉伸以适应容器。但同时会遵照’min/max-width/height’属性的限制
center	元素位于容器的中心。果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
flex-start	元素位于容器的开头
flex-end	元素位于容器的结尾
baseline	元素位于容器的基线上。行内轴与侧轴为同一条，则该值与’flex-start’等效

align-items 交叉轴上的单行对齐方式（设置单行）

属性值
stretch	默认值。元素被拉伸以适应容器。但同时会遵照’min/max-width/height’属性的限制。
center	元素位于容器的中心。果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start	元素位于容器的开头
flex-end	元素位于容器的结尾
baseline	元素位于容器的基线上。行内轴与侧轴为同一条，则该值与’flex-start’等效。

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。


flex-start	默认值。项目位于容器的开头
flex-end	项目位于容器的结尾
center	项目位于容器的中心
space-between	项目位于各行之间留有空白的容器内。第一个项目和最后一个项目分别与父级的margin为0. 以保持两两之间的空间相等。

弹性盒子元素下的子元素可设置属性

注释：子元素在弹性盒子中被称为项目

flex-grow 将子元素没填充的空间按照比例分配给子元素
属性值为数值（number）
简单说：沿着主轴方向将项目未占满的父级元素宽度或高度按照flex-grow的属性值比例加在项目的宽或高。

例子：
未设置flex-grow

 <style type="text/css">
		.box{
			display: flex;
			width: 400px;
			height: 400px;
			border: 1px solid black;
		}
		.centen{
			width: 200px;
			height: 200px;
			border: 1px solid black;
			background-color: #f00;
        }
	</style>
	<body>
		<div class="box">
			<div class="centen">			
			</div>						
		</div>
	</body>

在这里插入图片描述
加上 flex-grow: 1; 后父级元素宽度被撑满

在这里插入图片描述

例子2：将多个项目添加

<style type="text/css">
		.box{
			display: flex;
			width: 400px;
			height: 400px;
			border: 1px solid black;
		}
		.centen{
			width: 200px;
			height: 200px;
			border: 1px solid black;
			background-color: #f00;
			flex-grow: 1;
        }
        .centen2{
			width: 100px;
			height: 100px;
			border: 1px solid black;
			background-color: #f00;
			flex-grow: 4;
        }
	</style>
	<body>
		<div class="box">
			<div class="centen">			
			</div>	
			<div class="centen2">			
			</div>						
		</div>
	</body>

在这里插入图片描述

flex-shrink 将元素超出盒子的长度按比例分配给子元素减少宽度。
属性值为数值
与flex-grow 相对

flex-basis 设置后width 的值就会被flex-basis覆盖掉，当父级随子元素的宽撑大，直到子元素的宽度大于width，溢出

属性值为:
用长度值来定义宽度。不允许负值
用百分比来定义宽度。不允许负值
auto：无特定宽度值，取决于其它属性值

例子：flex-basis：50px；

在这里插入图片描述

在这里插入图片描述
往项目中添加内容，项目宽度随内容会被撑开

当内容超过width：100px；时，宽度不会继续被撑开

align-self 属性用于单独对某个元素设置对齐方式（沿交叉轴的对齐方式）

属性值
stretch	默认值。元素被拉伸以适应容器。但同时会遵照’min/max-width/height’属性的限制。
center	元素位于容器的中心。果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start	元素位于容器的开头
flex-end	元素位于容器的结尾
baseline	元素位于容器的基线上。行内轴与侧轴为同一条，则该值与’flex-start’等效。

order 可设置元素之间的排列顺序，数值越小，越靠前，默认为0（可设置负数）

flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

混名汪小星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3--弹性盒子(Flex Box)

了解掌握弹性盒子用法，利用fiex布局1.弄清楚弹性盒子主轴（默认横向）与交叉轴（默认纵向）2.弹性盒子概念对元素CSS的display属性设置flex或者inline-flex，那么这个元素就是弹性盒模型容器(flex container)，其子元素就是弹性盒模型子元素(flex item)。在容器中，水平的主轴(main axis)和垂直的交叉轴(cross axis)撑起这个弹性盒模...
复制链接

扫一扫