香菊网

幻雨焉缘

坚持比方法更重要 🥗
😃

flex_box 布局属性

香菊网 发表于: 2019-08-10 分类: css  H5部分  软件soft  前端front  

前言:

Flex是Flexible Box的缩写,顾名思义为“弹性布局”,用来为盒装模型提供最大的灵活性。 flex一维方向布局的方式。flex_box简称“容器”。它的所有子元素自动成为容器成员,成为flex项目(flex item),简称“项目”。

属性说明:

布局区别

float      浮动布局

position  脱离文档流

flexbox   一维布局方式  弹性布局

grid        二维布局方式  网格布局

因为grid有的属性跟flex很像  可先了解flexbox 弹性布局 再去了解 grid 网格布局。


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex_box 布局</title>
	<style type="text/css">
		.title {
			text-align: center;
		}
		.flex_box {
			background-color: #f00;
			height: 80px;
			display: flex; 
			/**
			 * 开启flex布局
			 */
			flex-direction: column-reverse;
			/* 
			 * 主轴的方向
			 * row 行 左侧开始 (默认)
			 * row-reverse 行 左侧开始
			 * column 垂直方向
			 * column-reverse 垂直方向 起点是在下方
			 */
			flex-wrap: nowrap;
			/**
			 * 超过是否换行
			 * wrap 换行
			 * nowrap 不换行  (默认)
			 * wrap-reverse  换行倒序 起点是在下方
			 */
			flex-flow: row  wrap;  
			/**
			 * flex-direction flex-warp 简写 可覆盖
			 */
			justify-content: space-around; 
			/**
			 * 定义在主轴上的对齐方式
			 * flex-start 左对齐 (默认)
			 * flex-end   右对齐
			 * center     中对齐
			 * space-between 项目之间 两端对齐
			 * space-around 环绕元素之间的间隙相等
			 */
			align-items: center;
			/**
			 * 项目在交叉轴上如何对齐
			 * flex-start
			 * flex-end
			 * center
			 * baseline 基线对齐
			 * stretch 未设置高度 或者auto 将撑满同期高度 (默认)
			 */
			align-content: center;
			/**
			 * 如果超出了一行之后 多行在容器中的对齐方式
			 * flex-start
			 * flex-end
			 * center
			 * stretch
			 * space-between
			 * space-around
			 */
		}
		.flex_box > div:nth-of-type(1) {
			background-color: #f00;
			/*内部元素属性*/
			order: 1; 
			/* 定义每个项目序号 数值越小 越靠前 默认从0开始 */
		}
		.flex_box > div:nth-of-type(2) {
			background-color: #0f0;
			/*内部元素属性*/
			order: 0;
			flex-grow: 0;
			/**
			 * 项目放大比例 
			 * 0 有剩余也不放大 
			 * 1 都有这个属性的话按倍数占比
			 */
			flex-shrink: 0;
			/**
			 * 项目缩小比例
			 * 0 其他元素空间不足时该项目也不缩小
			 * 1 其他不足时该项目缩小 倍数
			 */
			flex-basis: auto;
			/**
			 * 主轴分配多余空间之前 设置项目的固定空间
			 * px 占的空间
			 * auto 自动
			 */
			flex: 0 0 auto; /* 0 保持不放大也不缩小 */
			/**
			 *  flex-grow  flex-shrink  flex-basis 的缩写
			 */
			align-self: center;
			/**
			 * 会继承父元素的align-items的属性 或者覆盖父元素的这个属性
			 * 属性也是跟父元素的align-items属性一致
			 */
		}
		.flex_box > div:nth-of-type(3) {
			order: 2;
			background-color: #00f;
		}
	</style>
</head>
<body>                      
	<div class="title">flex 布局</div>
	<div class="flex_box">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
</body> 
</html>


 

标签: cssH5部分软件soft前端front
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮