Flex弹性盒子（一篇带你掌握潮流 Flex 布局）（上）-阿里云开发者社区

Flex弹性盒子（一篇带你掌握潮流 Flex 布局）（上）

2022-12-21 402

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Flex弹性盒子1.说在前头1.1.Flex布局出现之前我们知道传统的页面布局依赖于盒状模型依赖于display、position、float属性对于某些特殊布局来说特别不方便，比如垂直居中（比较不容易实现）1.2.Flex布局出现后2009年，W3C提出Flex布局简便、完整、响应式的各种实现页面布局（目前已得到所有主流浏览器的支持）

Flex弹性盒子

1.说在前头

1.1.Flex布局出现之前

我们知道传统的页面布局依赖于盒状模型
依赖于display、position、float属性
对于某些特殊布局来说特别不方便，比如垂直居中（比较不容易实现）

1.2.Flex布局出现后

2009年，W3C提出Flex布局
简便、完整、响应式的各种实现页面布局（目前已得到所有主流浏览器的支持）
意味着我们能很安全的使用这个功能

2.什么是Flex布局?

Flex就是弹性布局

弹性布局中弹性容器三个子元素，可以在任何方向上排布，可以任意伸缩它的尺寸
一个Flexbox只能处理一个维度的布局

基本构造

3.Flex container/item（父/子容器）的常用属性

针对于容器的	针对于item的
flex-direction	flex-grow
flex-wrap	flex-shrink
flex-flow	flex-basis
align-items	flex
align-content	align-self
justify-content	order

4.Let’s Codeing（父容器的属性）

4.1.display:flex;

当父元素设置为display:flex;的时候，它所有的子元素都成为它特有的成员，有自己的排列方式如图

html

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

css

.container{
    margin:150px auto;
    max-width: 800px;
    height: 400px;
    background-color: rgb(196, 229, 232);
    border: 5px solid rgb(0, 181, 203);
    display: flex;
}
.item{
    background-color: rgb(0, 181, 203);
    color: white;
    width: 100px;
    height: 100px;
    margin: 2px;
    font-weight: bold;
    font-size: 5em;
    text-align: center;
}

(王爷)演示

加入display:flex;

.container{
    margin:150px auto;
    max-width: 800px;
    height: 400px;
    background-color: rgb(196, 229, 232);
    border: 5px solid rgb(0, 181, 203);
    display: flex; <-----
}