位置:电子教程 > Flex Box实战教程 (如果看不到内容请使用360浏览器) 推荐学习资源
网页布局实战
九宫格实战
当前阅读教程:Flex Box实战教程 > 悬挂式布局
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 输入框的布局 下一篇: 流式布局

有时,主栏的左侧或右侧,需要添加一个图片栏。

image.png

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:

image.png

完整代码

<!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>



上一篇: 输入框的布局 下一篇: 流式布局
毕业设计网             广告联系QQ:45157718(微信同号)