HTML弹性布局基础讲解(二)

最新推荐文章于 2023-08-28 23:02:30 发布

河北颜良

最新推荐文章于 2023-08-28 23:02:30 发布

阅读量361

点赞数

分类专栏：入门基础笔记文章标签： css html

本文链接：https://blog.csdn.net/zhe06/article/details/107702010

版权

笔记同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

基础

11 篇文章 0 订阅

订阅专栏

入门

10 篇文章 0 订阅

订阅专栏

弹性布局样式属性

2.项目换行

属性	值	注释
flex-wrap	nowrap	默认值，主轴方向不够也不换行
	wrap	主轴方向空间不够时，自动换行
	wrap-reverse	交叉轴终点对齐，主轴方向空间不够时，反方向换行

3.主轴方向和换行可以缩写

flex-flow:direction wrap; //先写主轴方向，再写如何换行

4.定义项目在主轴上的对齐方式

属性	值	注释
justify-content	flex-start	默认值，主轴起点对齐
	center	主轴的中心对齐
	flex-end	主轴的终点对齐
	space-around	每次项目的间隙相同
	space-between	两端对齐

示意效果(来源菜鸟教程)

项目的样式

某一个项目使用
1.给某个项目单独设置交叉轴上的对齐方式

属性	值	注释
align-self	flex-start	默认值，在交叉轴起点对齐
	center	交叉轴中间对齐
	flex-end	交叉轴终点对齐
	baseline	每个项目中的文本，基线（文本分基线、底线、顶线、中线）要对齐
	stretch	项目在交叉轴方向上没有定义尺寸，项目将充满交叉轴
	auto	使用容器定义的align-items的值（交叉轴的对齐方式）

2.order
取值为无单位整数。
定义项目的排列顺序，值越小，越靠近主轴的排列方向，默认值为0。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; 
    display: flex;
}

#main div {
    width: 100px;
    height: 100px;
}

div#d1{order: 6;}
div#d2{order: 4;}
/*顺序为蓝红*/
</style>
</head>
<body>

<div id="main">
  <div style="background-color:red;" id="d1"></div>
  <div style="background-color:blue;" id="d2"></div>
  
</div>
</body>
</html>

属性	值	注释
flex-grow	默认值是0	当主轴有多余的区域，项目是否放大，放大比例是多少。默认值为0，不放大。把多余的区域，按照比例分配，加上原始的尺寸（这个项目的实际尺寸）
flex-shrink	默认值1	当主轴空间不足时，项目是否缩小，怎么缩小。不设置换行的情况下，会自动缩小。主轴不足的部分，按照比例。分配给各个项目去缩减。
flex-basis	**%	设置某个项目在主轴上占据的基本尺寸，通常取值为%。flex-basis优先级大于项目自己定义的尺寸

关于这三个值有缩写（flex-grow flex-shrink flex-basis的缩写）

flex:0 0 20%;

效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#content{
				width: 1000px;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap; //本行占满后换行
				justify-content: space-between;
			}
			#content>div{background-color: #36d;}
			.top_height{height: 377px;}
			.bottom_height{height:233px;}
			#content>div:first-child{flex:0 0 32%;}
			#content>div:nth-child(2),#content>div:nth-child(3){flex:0 0 33%;;margin-left: 10px;}
			#content>div:nth-child(4){flex:0 0 50%;margin-top: 10px;}
			#content>div:nth-child(5){flex:0 0 49%;margin-top: 10px;}
			
		</style>
	</head>
	<body>
		<div id="content">
			<div class="top_height"></div>
			<div class="top_height"></div>
			<div class="top_height"></div>
			<div class="bottom_height"></div>
			<div class="bottom_height"></div>
			
		</div>
	</body>
</html>

河北颜良

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML弹性布局基础讲解(二)

弹性布局样式属性2.项目换行属性值注释flex-wrapnowrap默认值，主轴方向不够也不换行wrap主轴方向空间不够时，自动换行wrap-reverse交叉轴终点对齐，主轴方向空间不够时，反方向换行3.主轴方向和换行可以缩写flex-flow:direction wrap; //先写主轴方向，再写如何换行4.定义项目在主轴上的对齐方式属性值注释justify-contentflex-start默认值，主轴起点对齐
复制链接

扫一扫

专栏目录