1.flex布局属性

容器属性：

1.flex-direction属性:
                row(默认) ：即横向排列，项目排列顺序为正序1-2-3；
                row-reverse ：同为横向排列，但项目顺序为倒序3-2-1。
                column ：与row相反，为纵向排列，项目顺序为正序1-2-3。
                column-reverse：同为纵向排列，项目顺序为倒序3-2-1。

2.flex-wrap属性:

沿主轴的排列处理，可使得主轴上的元素不换行、换行、反向换行
        nowrap(默认):不换行，宽度不够，元素宽度会相应缩小
        wrap：换行，项目不会等分容器宽度，会根据自身宽度进行排列，如果超出父容器宽度则自然换行。
        wrap-reverse：表示换行，需要注意的是第一排会紧贴容器底部，效果与wrap相反。

3.flex-flow属性：

是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行

4.justify-content属性：

主轴对齐方式
        取值：flex-start(默认):左对齐
                flex-end：右对齐
                center：居中
                space-between：左右两端对齐，即左右两侧项目都紧贴容器,项目之间间距相等。
                space-around：项目之间间距为左右两侧项目到容器间距的2倍。
                space-evenly:项目之间间距与项目与容器间距相等。

5.align-items属性：

交叉轴排列方式
        取值：flex-start：会让项目在交叉轴紧贴容器顶部，flex-end与之相反，
                flex-end：会让项目在交叉轴紧贴容器底部。
                center：在交叉轴中心位置排列
                baseline：比较特殊，它让项目以第一行文字的基线为参照进行排列。
                stretch(默认)：如果项目没设置高度，或高度为auto，则占满整个容器

6.align-content属性：

用于控制多行项目的对齐方式
        取值：flex-start：lex-start ，center，flex-end 与align-items属性表现一致
                flex-end
                center
                space-between：space-between为上下两侧项目紧贴容器。
                space-around：space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。
                space-evenly：space-evenly同理，项目之间间距与项目到容器之间间距相等。
                stretch(默认)：即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。

元素属性：

7.order属性：
取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。(靠前意思是处于文档流的前面，123，3是靠前的)

8.flex-grow属性：
取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；
注意，即便设置了固定宽度，也会放大。

9.flex-shrink属性：
取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；
注意，即便设置了固定宽度，也会缩小。但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

10.flex-basis属性：
取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖widtn属性。
优先级>width

11.flex属性：
            取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。
            该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小，还有最常用的flex:1 === flex: 1 1 0px
            当flex为1时，占满剩余宽度的一份（一份是多少取决于总宽度-固定宽度之和/几份*所占份数）

三列布局：父元素：display-flex
            子元素： flex:1;

12.align-self属性：

表示继承父容器的align-items属性。如果没父元素，则默认stretch。
用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。
取值：auto(默认) | flex-start | flex-end | center | baseline | stretch

2.flex弹性盒模型-----display：flex；

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

对于某个元素只要声明了display: flex;那么这个元素就成为了弹性容器，具有flex弹性布局的特性。

1.每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。

注意：水平的不一定就是主轴。

2.每根轴都有起点和终点，这对于元素的对齐非常重要。

3.弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。

4.弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

1.简介

主轴：

flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。

我们可以在弹性容器上通过flex-direction修改主轴的方向。如果主轴方向修改了，那么：

交叉轴就会相应地旋转90度。
弹性元素的排列方式也会发生改变，因为弹性元素永远沿主轴排列。

举例：

<body><div class="father"><div class="son">1<div class="sun" >孙子1</div><div class="sun1">孙子2</div><div class="sun2">孙子3</div></div><div class="son1">2</div><div class="son2">3</div><div class="son3">4</div><div class="son4">5</div></div>
</body><style>.father{width: 800px;height: 500px;border: 1px solid black;display: flex;/* 主轴排列方向 *//* flex-direction: row; *//* flex-direction: row-reverse; *//* flex-direction: column; *//* flex-direction: column-reverse; *//* 元素换行 *//* flex-wrap: wrap; *//* 在主轴上的对齐方式 *//* 右对齐 *//* justify-content: flex-end; *//* 居中 *//* justify-content: center; *//* 左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。 *//* justify-content: space-between; *//* 项目之间间距为左右两侧项目到容器间距的2倍 *//* justify-content: space-around; *//* 项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。 *//* justify-content: space-evenly; *//* 轴 *//* align-items: flex-end; *//* align-items: center; *//* align-items: baseline; */}.son{width: 100px;height:100px;background-color: pink;/* 弹性元素也可以设置成盒子 */display: flex;}.son1{width: 100px;height: 100px;background-color:blue;}.son2{width: 100px;height: 100px;background-color: yellow ;}.son3{width: 100px;height: 100px;background-color: rgb(174, 0, 255);}.son4{width: 100px;height: 100px;background-color: rgb(24, 197, 228) ;}.son *{width: 50px;height: 50px;border: 2px solid  green;}
</style>

3.淘宝首页布局

先上个效果图：

实现代码：

<body><div class="father"><!-- 第一行 --><div class="son"><div class="second"><img src="./images/1.png"><span>天猫新品</span></div><div class="second"><img src="./images/2.png"><span>今日爆款</span></div><div class="second"><img src="./images/3.png"><span>天猫国际</span></div><div class="second"><img src="./images/4.png"><span>天猫超市</span></div><div class="second"><img src="./images/5.png"><span>充值中心</span></div></div><!-- 第二行 --><div class="son"><div class="second"><img src="./images/6.png"><span>机票酒店</span></div><div class="second"><img src="./images/7.png"><span>金币庄园</span></div><div class="second"><img src="./images/8.png"><span>阿里拍卖</span></div><div class="second"><img src="./images/9.png"><span>淘宝吃货</span></div><div class="second"><img src="./images/10.png"><span>分类</span></div> </div></div>
</body>
</html>
<style>/* 控制行，设置为弹性盒子 */.son{display: flex;/* 设置主轴对齐方式 */justify-content: space-around;}/* 控制图片和文字行 */.second{/* 设置每个格子比例大小 */width: 18%;/* 文字居中 */text-align: center;}.second img{width: 100%;}
</style>

最重要的事：学以致用！学以致用！学以致用！

flex布局（弹性布局）相关推荐

HTML/CSS布局—Flex布局(弹性布局)
目的:能够使用Flex布局模型灵活.快速的开发网页 Flex布局/弹性布局: 是一种浏览器提倡的布局模型布局网页更简单.灵活避免浮动脱标的问题作用: 基于 Flex 精确灵活控制块级盒子的布局方 ...
Flutter 布局Row（水平方向布局）、Column（垂直方向布局）、Wrap（可以自动换行的布局）、Flex（弹性布局）、Stack（叠层布局）、
1.线性布局 Row 水平方向布局 Row({... //表示水平方向子组件的布局顺序(是从左往右还是从右往左),//默认为系统当前Locale环境的文本方向(如中文.英语都是从左往右,而阿拉伯语是从 ...
flex布局(弹性布局、伸缩布局)
flex是CSS3中的一种布局方式主要介绍下弹性布局的常用的一些属性当一个盒子设置为display:flex的时候,盒子会变为一个弹性盒子,盒子内部的子元素会默认沿着主轴方向排布,此时会引出主轴和 ...
自适应网页(响应式布局)+弹性布局
1.自适应网页 1.声明viewport元标签 <meta name="viewport" content="width=device-width,initial- ...
CSS display:flex（弹性布局）
序: 考虑到实际开发中,写样式的机会不多,但是不可能不写,脑子容量总是不够用,每次都查,这次自己就总结下,方便下次查找(举例以下常用六个属性,语法都是加在父元素身上的). 1.flex-direc ...
Html——flex布局弹性布局
以下文章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案. 一.flex布局的语法块级元素 :display: flex ---- 将容器盒模型作为块级弹性伸缩盒显示行 ...
flex 左右布局_web前端学习：移动端开发常用布局—前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
flex 左右布局_移动端开发常用布局：前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
HTML+CSS flex弹性布局
flex布局原理 flex是flexible box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局. 当我们为父盒子设置为flex ...
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
目录前言 Flex 布局是什么? Flex 简介 Flex 容器属性 Flex 基本使用场景一 flex-direction 场景二 justify-content align-it ...

flex布局（弹性布局）