flex弹性布局学习-实例
2019-05-05 本文已影响0人
若沫成海
flex语法原文链接：https://blog.csdn.net/lm9948/article/details/80732702
索隆萨克同学告诉的学习flex小游戏链接：http://flexboxfroggy.com/#zh-cn
flex实例原文链接：http://www.mamicode.com/info-detail-1683579.html
任何一个容器都可以指定为flex布局，这个容器称作flex容器，其中的子元素则为flex项目
<div class="box">
<span class="item"></span>
</div>
将div元素设为flex容器方法如下：
.box{
display:flex;
}
实例：
（一）骰子的布局
（二）网格布局
1.基本网格布局
平均分布，但是需要设置项目的自动缩放。
<div class=box>
<div class="item">1/3</div>
<div class="item">1/3 </div>
<div class="item">1/3 </div>
</div>
.box{
display:flex;
background: red;
}
.item{
flex:1;
background: grey;
border: 1px solid white;
text-align: center;
}
2.百分比布局
某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间
<div class="box">
<div class="item u-1of1">50%</div>
<div class="item">auto</div>
<div class="item">auto</div>
</div>
.box{
display:flex;
background: red;
}
.item{
flex:1;
background: grey;
border: 2px solid white;
text-align: center;
}
.item.u-1of1{
flex:0 0 50%;
}
(三)圣杯布局
最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
<body class="HolyGrail">
<header>#header</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">#content</main>
<nav class="HolyGrail-nav">#left</nav>
<aside class="HolyGrail-ads">#right</aside>
</div>
<footer>#footer</footer>
</body>
如果是小屏幕，躯干的三栏自动变为垂直叠加。
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
}
