CSS学习18--伸缩布局

最新推荐文章于 2024-09-10 22:58:41 发布

乌鸦不像写字台

最新推荐文章于 2024-09-10 22:58:41 发布

阅读量572

点赞数 10

分类专栏： css学习文章标签： css 学习前端

本文链接：https://blog.csdn.net/qq_54641174/article/details/142108907

版权

css学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

伸缩布局

一、伸缩布局
二、属性设置

一、伸缩布局

给父级display: flex;
给孩子flex: 1;

自由变动

<html>
	<head>
		<style>
			section {
				width: 1000px;
				height: 200px;
				border:1px solid pink;
				margin:100px auto;
				/*父级盒子添加f1ex*/
				dispLay:flex;/*伸缩布局模式*/
			}
			section div {
				height:100%;
				/*flex:1子盒子添加份数*/
			}
			section div:nth-child(1){
				background-color:pink;
				flex:1
			}
			section div:nth-child(2){
				background-color:purple;
				margin:0 5px;
				flex:2 /*不加单位！*/
			}
			section div:nth-child(3){
				background-color:pink;
				flex:1
			}
		</style>
	</head>
	<body>
	<section>
		<div></div>
		<div></div>
		<div></div>
	</section>
</html>

二、属性设置

flex子项目在主轴的缩放比例，不指定f1ex属性，则不参与伸缩分配。
- min-width 最小值
  min-width:280px 最小宽度不能小于280
  max-width:1280px最大宽度不能大于1280
- 直接设定width则不变化
flex-direction 调整主轴方向（默认为水平方向）

flex-direction:column; 垂直排列
flex-direction:row; 水平排列
flex-direction:row-reverse; 水平翻转
justify-content 调整主轴对齐（水平对齐）
- flex-start 默认值。项目位于容器的开头。让子元素从父容器的开头排序，让子元素从父容器的开头开始排序
- flex-end 项目位于容器的结尾。让子元素从父容器的后面开始排序
- center 项目位于容器的中心。让子元素在父容器中间显示
- space-between 项目位于各行之间留有空白的容器内。左右的盒子贴近父盒子，中间的平均分布空白间距
- space-around 项目位于各行之前、之间、之后都留有空白的容器内。相当于给每个盒子添加了左右margin外边距
align-items 调整侧轴对齐（垂直对齐）
- stretch 默认值。项目被拉伸以适应容器。让子元素的高度拉伸适用父容器（子元素不给高度的前提下）
- center 项目位于容器的中心。垂直居中
- flex-start 项目位于容器的开头。垂直对齐开始位置
- flex-end 项目位于容器的结尾。垂直对齐结束位置
flex-wrap控制是否换行
当我们子盒子内容宽度多于父盒子的时候如何处理
- nowrap 默认值。规定灵活的项目不拆行或不拆列。不换行，则收缩（压缩）显示
- wrap 规定灵活的项目在必要的时候拆行或拆列。
- wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
flex-flow是flex-direction、flex-wrap的简写形式
align-content堆栈（由flex-wrap产生的独立行）对齐
align-content是针对flex容器里面多轴（多行）的情况，align-items是针对一行的情祝进行排列。
必须对父元素设置自由盒属性display:flex,并且设置排列方式为横向排列fHex-direction:row并且设置换行，flex-wrap:wrap;这样这个属性的设
置才会起作用。
order控制子项目的排列顺序，正序方式排序，从小到大