 |
位置：电子教程 > Flex Box实战教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > Flex Box实战教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：Flex Box实战教程 > 悬挂式布局 | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： 输入框的布局 | 下一篇： 流式布局 |
|
有时，主栏的左侧或右侧，需要添加一个图片栏。
HTML代码如下 <div> <img src="" alt=""> <p>...</p> </div> CSS代码如下 .Media {
display: flex;
align-items: flex-start;
}
.Media-figure {
margin-right: 1em;
}
.Media-body {
flex: 1;
}实战案例2：
完整代码 <!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>悬挂式布局</title>
</head>
<body>
<div>
<img src="1.png" />
<p>
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
</p>
</div><hr>
<style>
.c01{ display:flex; }
.c01-a{}
.c01-b{flex:1;}
</style>
<div>
<p><img src="1.png" width="32" height="32" /></p>
<p>
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
</p>
</div><hr>
<style>
.c01{ display:flex; }
.c01-a{}
.c01-b{flex:1;}
</style>
<div>
<p>
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
</p>
<p><img src="1.png" width="32" height="32" /></p>
</div><hr>
<style>
.c02{ display:flex;margin:10px; padding:10px;}
.c01{ display:flex; background-color:#0CF; margin:10px;}
.c01-a{}
.c01-b{flex:1;}
</style>
<div>
<div>
<p><img src="1.png" width="32" height="32" /></p>
<p>
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
</p>
</div>
<div>
<p><img src="1.png" width="32" height="32" /></p>
<p>
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
</p>
</div>
</div>
</body>
</html> |
|
| 上一篇： 输入框的布局 | 下一篇： 流式布局 |
