一、伸缩布局

给父级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>

二、属性设置

  1. flex子项目在主轴的缩放比例,不指定f1ex属性,则不参与伸缩分配。

    • min-width 最小值
      min-width:280px 最小宽度不能小于280
      max-width:1280px最大宽度不能大于1280
    • 直接设定width则不变化
  2. flex-direction 调整主轴方向(默认为水平方向)

    flex-direction:column; 垂直排列
    flex-direction:row; 水平排列
    flex-direction:row-reverse; 水平翻转

  3. justify-content 调整主轴对齐(水平对齐)

    • flex-start 默认值。项目位于容器的开头。让子元素从父容器的开头排序,让子元素从父容器的开头开始排序
    • flex-end 项目位于容器的结尾。让子元素从父容器的后面开始排序
    • center 项目位于容器的中心。让子元素在父容器中间显示
    • space-between 项目位于各行之间留有空白的容器内。左右的盒子贴近父盒子,中间的平均分布空白间距
    • space-around 项目位于各行之前、之间、之后都留有空白的容器内。相当于给每个盒子添加了左右margin外边距
  4. align-items 调整侧轴对齐(垂直对齐)

    • stretch 默认值。项目被拉伸以适应容器。让子元素的高度拉伸适用父容器(子元素不给高度的前提下)
    • center 项目位于容器的中心。垂直居中
    • flex-start 项目位于容器的开头。垂直对齐开始位置
    • flex-end 项目位于容器的结尾。垂直对齐结束位置
  5. flex-wrap控制是否换行
    当我们子盒子内容宽度多于父盒子的时候如何处理

    • nowrap 默认值。规定灵活的项目不拆行或不拆列。不换行,则收缩(压缩)显示
    • wrap 规定灵活的项目在必要的时候拆行或拆列。
    • wrap-reverse 规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。
  6. flex-flow是flex-direction、flex-wrap的简写形式

  7. align-content堆栈(由flex-wrap产生的独立行)对齐
    align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情祝进行排列。
    必须对父元素设置自由盒属性display:flex,并且设置排列方式为横向排列fHex-direction:row并且设置换行,flex-wrap:wrap;这样这个属性的设
    置才会起作用。

  8. order控制子项目的排列顺序,正序方式排序,从小到大

此知识点重在理解,要明确找出主轴、侧轴、方向,各属性对应的属性值

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部