css3 フレックス フロー アダプティブ レスポンシブ レイアウト example_html/css_WEB-ITnose

前回、css3 の flex に関連するいくつかの概念について簡単に説明しました (詳細: css 学習 16: css3 flex フロー アダプティブ レスポンシブ レイアウト デザイン)、今回は引き続き css3 の flex について説明し、いくつかの例を示します。 。

1. 画像適応センタリング

画像の例:

HTML の例:

<div class="demo">	<img src="/static/imghwm/default1.png"  data-src="http://dummyimage.com/100x100"  class="lazy" alt=""></div><div class="demo">	<img src="/static/imghwm/default1.png"  data-src="http://dummyimage.com/200x100"  class="lazy"  class="" alt=""></div><div class="demo">	<img src="/static/imghwm/default1.png"  data-src="http://dummyimage.com/100x200"  class="lazy" alt=""></div><div class="demo">	<img src="/static/imghwm/default1.png"  data-src="http://dummyimage.com/200x200"  class="lazy" alt=""></div><div class="demo">	<img src="/static/imghwm/default1.png"  data-src="http://dummyimage.com/50x50"  class="lazy" alt=""></div>

CSS の例:

.demo{	width: 100px;	height: 100px;	border: 2px solid #ddd;	background: #f5f5f5;	padding: 6px;	float: left;	margin-left: 20px;	/*flex布局（作用于容器）*/	display: flex;	/*水平居中（作用于容器）*/	justify-content: center;	/*垂直居中（作用于容器）*/	align-items: center;}.demo img{	max-width: 100px;	max-height: 100px;	width: auto;	height: auto;}

デモ: http://demo.qianduanblog.com/2799/1.html

2.水平レスポンシブ リスト

画像の例:

HTML の例:

<div class="demo-wrap">	<div class="demo">		<div class="item item1">高120px</div>		<div class="item item2">高50px</div>		<div class="item item3">高140px</div>		<div class="item item4">高100px</div>	</div></div>

CSS の例:

.demo-wrap{	border: 2px solid #ddd;	background: #f5f5f5;	padding: 6px;}.demo{	width: 100%;	/*flex布局（作用于容器）*/	display: flex;	/*两端对齐（作用于容器）*/	justify-content: space-between;}.demo .item{	width: 100px;	background: #ffd;	color: #C90000;	font-size: 20px;	text-align: center;	line-height: 50px;}.demo .item1{	height: 120px;}.demo .item2{	height: 50px;}.demo .item3{	height: 140px;}.demo .item4{	height: 100px;}

デモ: http://demo.qianduanblog.com/2799/2.html

3. 水平レスポンシブ リスト 下揃え

は、下部の位置揃え機能が追加されていることを除いて、前の例と似ています。

コンテナのスタイルを変更しました:

.demo{	width: 100%;	/*flex布局（作用于容器）*/	display: flex;	/*两端对齐（作用于容器）*/	justify-content: space-around;	/*侧轴方向对齐方式（作用于容器）*/	align-items: flex-end;}

デモ: http://demo.qianduanblog.com/2799/3.html

4. 複数行のレスポンシブ レイアウト

ワイドスクリーン:

Medium画面:

狭画面:

HTML コード:

<div class="demo-wrap">	<div class="demo">		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>		<div class="item"></div>	</div></div>

CSS コード:

.demo-wrap{	border: 2px solid #ddd;	background: #f5f5f5;	padding: 6px;}.demo{	width: 100%;	/*flex布局（作用于容器）*/	display: flex;	/*两端对齐（作用于容器）*/	justify-content: space-around;	/*侧轴方向对齐方式（作用于容器）*/	align-items: flex-end;	/*换行（作用于容器）*/	flex-wrap: wrap;}.demo .item{	width: 300px;	height: 50px;	background: #444;	margin-bottom: 20px;}

デモ: http://demo.qianduanblog.com/2799/4.html

5. 左が固定、右が固定アダプティブ輪郭レイアウト

デモのスクリーンショット:

HTML:

<div class="demo">	<div class="left">左边固定宽度为100px，这里设置了高度为auto</div>	<div class="right">右边宽度自适应，并且左右两个区域是等高的，这里设置了高度为200px</div></div>

CSS:

.demo{	/*flex布局（作用于容器）*/	display: flex;	/*项目拉伸对齐，也就是所左边的高度为拉伸到和右边等高，默认是拉伸的*/	/*align-items: stretch;*/}.demo .left{	/*左边固定宽度，必须设置其最小宽度和最大宽度*/	width: 100px;	min-width: 100px;	max-width: 100px;	/*高度自由分配*/	height: auto;	background: #B4D3F7;	/*空白区域分配比例为0（作用于项目）*/	flex-grow: 0;}.demo .right{	margin-left: 10px;	width: auto;	height: 200px;	background: #F7E8B4;	/*空白区域分配比例为1（作用于项目）	左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域，	左边成固定的宽度，右边为自适应宽度*/	flex-grow: 1;}

デモ: http://demo.qianduanblog.com/2799/5.html

6. 左右の固定中央適応幅Bottom 配置レイアウト

上記の例は左右のレイアウトですが、2 列のレイアウトも可能ですので、3 列のレイアウトでも問題ありません。まずはサンプル画像を見てみましょう:

HTML:

<div class="demo">	<div class="left">左边固定宽度为100px，这里设置了高度为auto</div>	<div class="center">中间宽度自适应，并且左中右两个区域是等高的，这里设置了高度为200px</div>	<div class="right">右边固定宽度为150px，这里设置了高度为auto</div></div>

CSS:

.demo{	/*flex布局（作用于容器）*/	display: flex;	/*项目拉伸对齐，也就是所左边的高度为拉伸到和右边底部对齐*/	align-items: flex-end;}.demo .left{	/*左边固定宽度，必须设置其最小宽度和最大宽度*/	width: 100px;	min-width: 100px;	max-width: 100px;	/*高度自由分配*/	height: auto;	background: #B4D3F7;	/*空白区域分配比例为0（作用于项目）*/	flex-grow: 0;}.demo .center{	margin: 0 10px;	width: auto;	height: 200px;	background: #F7E8B4;	/*空白区域分配比例为1（作用于项目）	左右得到的空白比例为0:1，所以右边会分配到剩余的所有空白区域，	左边成固定的宽度，右边为自适应宽度*/	flex-grow: 1;}.demo .right{	/*右边固定宽度，必须设置其最小宽度和最大宽度*/	width: 150px;	min-width: 150px;	max-width: 150px;	/*高度自由分配*/	height: auto;	background: #CBFFD2;	/*空白区域分配比例为0（作用于项目）*/	flex-grow: 0;}

デモ: http://demo.qianduanblog.com/2799/6.html