您的位置：首页 > 其它

flexbox布局

2017-10-24 16:45 344 查看

1、flex兼容性

根据caniuse（http://caniuse.com/#search=flex），flex布局在IE6-9不支持。

因此，flex布局主要应用在移动端。

2、基础测试代码

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

.item {
/*flex布局*/
display: flex;
}
</style>
</head>

<body>
<div class="item">
<div class="item-img">
<img src="img/aaa.jpg" alt="" />
</div>
<div class="item-desc">
<h3>说明</h3>
</div>
</div>

</body>

</html>

效果：

说明：

将父元素设置为flex布局后，子元素也默认成了弹性元素，子元素并会自动沿主轴方向横向排列。

3、弹性布局轴

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

.hb-shelf {
/*flex布局*/
display: flex;
}

.item {
width: 240px;
border: 1px solid red;
}
</style>
</head>

<body>
<section class="hb-shelf">
<article class="item">
1
</article>
<article class="item">
2
</article>
<article class="item">
3
</article>
<article class="item">
4
</article>
</section>

</body>

</html>

给item设置宽度后，在浮动布局中，浏览器尽可能显示article的元素，直到填充满一整行才折行显示。

在flex布局中，flex-wrap: nowrap;值优先级高于article的宽度值width。当屏幕宽度小于960px时，保证所有的article等分扩展填充；当屏幕宽度大于960px时，右侧留空白。

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航