flex_flex: 25% 0 0-CSDN博客

flex align-content中的描述的“多根轴线的对齐方式”中的“多根轴线”到底是什么

flex 有两条轴线，根据flex-flow 设置的来判断的，水平为主轴的话，那么值为row，垂直为主轴的话那么为column；

其中设置align-items 和 align-content都是来设置交叉轴的。

这2个属性设置参数互不影响。

align-items ：在单根轴线和多根都有效，这轴线我理解为是主轴。

align-cotennt：在多根轴线有效的时候设置有效，假如align-items和 content都设置了不同的值，
那么align-content的值永远被优先使用，无论声明顺序。

多轴我的理解为：flex-flow 中有一个属性，nowrap 和 wrap 这表示当主轴一次性不能排下这么多元素的时
候，采取的排序方法，wrap的意思就是一行排不下了，换到下一行来展示，如果下一行还是展示不下，
就再换到下一行。

如果flex-flow设置为row的话，采用wrap方法展示了3行。那么就有3个主轴平行的，那么就属于多轴了。

/*以下6个属性设置在容器上。
flex-direction: row | row-reverse | column | column-reverse; 属性决定主轴的方向（即项目的排列方向）
flex-wrap: nowrap | wrap | wrap-reverse 如果一条轴线排不下，如何换行
flex-flow
justify-content: 项目在主轴上的对齐方式
    flex-start 
    flex-end 
    center 
    space-between(两端对齐，项目之间的间隔都相等) 
    space-around(每个项目两侧的间隔相等。
    所以，项目之间的间隔比项目与边框的间隔大一倍。) 项目在主轴上的对齐方式
align-items: 项目在交叉轴上如何对齐
 	flex-start：交叉轴的起点对齐。
	flex-end：交叉轴的终点对齐。
	center：交叉轴的中点对齐。
	baseline: 项目的第一行文字的基线对齐。
	stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
 	flex-start：与交叉轴的起点对齐。
	flex-end：与交叉轴的终点对齐。
	center：与交叉轴的中点对齐。
	space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
	space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
	stretch（默认值）：轴线占满整个交叉轴。
	
项目的属性
	order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 在类里面添加
	flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 .item {flex-grow: <number>; }
	flex-shrink 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
	flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
            浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
	flex flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
            后两个属性可选。 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
	align-self: auto | flex-start | flex-end | center | baseline | stretch; 
            属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，
            表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

每行几个

.content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}

.item_1 {
	/*width: 99%;*/
	/*width: 49%;*/
	/*width: 32%;*/ 
	/*width: 24%;*/
	/*width: 19%;*/
	/*每行几个 1 2 3 4 5*/
	border:1px solid;
	margin-top: 6px;
}

.item_2 {
	width: 100%;
}

<div class="content">
	<div class="item_1">
		<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2338693105,1140444294&fm=58&bpow=512&bpoh=512" class="item_2" />
	</div>
	<div class="item_1">
		<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2338693105,1140444294&fm=58&bpow=512&bpoh=512" class="item_2" />
	</div>
	<div class="item_1">
		<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2338693105,1140444294&fm=58&bpow=512&bpoh=512" class="item_2" />
	</div>
	<div class="item_1">
		<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2338693105,1140444294&fm=58&bpow=512&bpoh=512" class="item_2" />
	</div>
	<div class="item_1">
		<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2338693105,1140444294&fm=58&bpow=512&bpoh=512" class="item_2" />
	</div>
</div>

百分比网格布局

/*某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。*/
.Grid {
	display: flex;
	margin-top: 10px;
}

.Grid-cell {
	flex: 1;
	background: darkcyan;
	border:1px solid;
	display: flex;
	align-items:center;
	justify-content:center;
}

.Grid-cell.u-full {
	flex: 0 0 100%;
}

.Grid-cell.u-1of2 {
	flex: 0 0 50%;
}

.Grid-cell.u-1of3 {
	flex: 0 0 33.3333%;
}

.Grid-cell.u-1of4 {
	flex: 0 0 25%;
}

<div class="Grid">
	<div class="Grid-cell u-1of4">25%</div>
	<div class="Grid-cell">某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。</div>
	<div class="Grid-cell u-1of3">33%</div>
</div>

<div class="Grid">
	<div class="Grid-cell u-1of4">25%</div>
	<div class="Grid-cell">某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。</div>
	<div class="Grid-cell u-1of4">33%</div>
</div>

流式布局

.parent {
	/*width: 200px;*/
	display: flex;
	flex-flow: row wrap;
	align-content: flex-start;
}

.child {
	box-sizing: border-box;
	background-color: darkcyan;
	
	flex: 0 0 25%;
	/*flex: 0 0 33.3%;
	flex: 0 0 50%;*/
	
	height: 50px;
	border: 1px solid red;
}

<div class="parent">
	<div class="child">25%</div>
	<div class="child">25%</div>
	<div class="child">25%</div>
	<div class="child">25%</div>
</div>

悬挂式布局

.Media {
	display: flex;
	align-items: flex-start;
}

.Media-figure {
	margin-right: 1em;
}

.Media-body {
	flex: 1;
}

<p>悬挂式布局</p>
<p>有时，主栏的左侧或右侧，需要添加一个图片栏。</p>
<div class="Media">
	<img class="Media-figure" src="https://b-ssl.duitang.com/uploads/item/201501/25/20150125094219_cWXuL.jpeg" style="width: 50px;height:50px;;" alt="">
	<p class="Media-body">以Sync（同步，同时）结尾的都是都是同步缓存，二者的区别是，异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行。以Sync（同步，同时）结尾的都是都是同步缓存，二者的区别是，异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行。</p>
</div>

input

.InputAddOn {
	display: flex;
}

.InputAddOn-field {
	flex: 1;
}

<div class="InputAddOn">
	<span class="InputAddOn-item">请输入</span>
	<input class="InputAddOn-field">
	<button class="InputAddOn-item">确定</button>
</div>

<div class="InputAddOn">
	<button class="InputAddOn-item">确定</button>
	<input class="InputAddOn-field">
</div>

flex_fix_bottom

.Site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.Site-content {
	flex: 1;
}

<body class="Site">
	<p>固定的底栏</p>
	<p>有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。</p>
	<main class="Site-content">中间内容</main>
	<footer>底部</footer>
</body>

色字

body {
	width: 100%;
	height: 100%;
	background: darkcyan;
}

.content {
	display: flex;
	/*flex-direction: column;*/
	width: 100px;
	height: 100px;
	border-radius: 10px;
	background: white;
	margin: 0 auto;
}

.item_1 {
	/*width: 99%;*/
	/*width: 49%;*/
	/*width: 32%;*/
	/*width: 24%;*/
	/*width: 19%;*/
	/*border:1px solid;
	margin-top: 6px;*/
	width: 30px;
	height: 30px;
	border-radius: 5px;
	background: black;
}

<div class="content">
	<div class="item_1">

	</div>
	<div class="item_1" style="align-self:center">

	</div>
	<div class="item_1" style="align-self:flex-end">

	</div>
</div>