Flex Box页面布局实战课程-悬挂式布局_通用实战_Flex Box教程_微信小程序毕业设计成品作品源代码网站

联系我们我要留言

通用实战: Flex Box页面布局实战课程-悬挂式布局
时间：2019/1/21 12:33:47  作者：互联网  来源：网络转载  查看：37069  评论：0
内容摘要：有时，主栏的左侧或右侧，需要添加一个图片栏。效果图html代码<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html;...
有时，主栏的左侧或右侧，需要添加一个图片栏。

效果图

html代码

<!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 class="c01">

     <p class="c01-a"><img src="1.png" width="32" height="32" /></p>

    <p class="c01-b">

    采用 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 class="c01">

    <p class="c01-b">

    采用 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 class="c01-a"><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 class="c02">

    <div class="c01">

       <p class="c01-a"><img src="1.png" width="32" height="32" /></p>

        <p class="c01-b">

        采用 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 class="c01">

         <p class="c01-a"><img src="1.png" width="32" height="32" /></p>

        <p class="c01-b">

        采用 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>

标签：Flex Box入门教程 Flex布局设计教程 flexbox在线视频教程
上一篇：Flex Box页面布局实战课程-流式布局
下一篇：Flex Box页面布局实战课程-输入框的布局

相关文章

相关评论

本类更新

本类推荐

本类排行

: 小白教程 | 计算机毕业设计作品网 | 小程序中文网 | 洪荒毕设网 | 毕业设计资料下载 |

联系我们 - 服务报价 - 关于我们 - 留言本

咨询QQ/微信：45157718