Flex 弹性布局（上）

今天，我和大家一起简单的了解一下Flex,
Flex是什么呢，它具有什么样的作用呢，一般是用来做什么的呢，让我们在下面中，简单的了解一些有关Flex的相关知识。其实Flex只是Flexible Box的速写，它的意思是“弹性布局”。但是我们为了方便呢，就直接叫Flex，

Flex 是 Flexible Box
“弹性布局”，,是用来为盒状模型提供最大的灵活性。任何一个容器都可以说定 Flex 布局。弹性布局、弹性布局，看名字就知道有多“Q弹”。算了，废话少说，现在让我们来看一下Flex到底有什么作用。

我们先用属性建好一个新的弹性布局，然后将直属内部子元素转换为Flex属性，Flex元素的容器和子项目可以通过额外的Flex属性定义来操控Flex.

说到属性嘛，弹性盒子中经常用到的属性分别有：

1、display
指定 HTML 元素盒子类型。

2、flex-direction 指定了弹性容器中子元素的排列方式

3、justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。

4、align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

5、flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。

6、align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐

7、flex-flow flex-direction
和 flex-wrap 的简写

8、order
设置弹性盒子的子元素排列顺序。

9、align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。

10、flex
设置弹性盒子的子元素如何分配空间。

我们先来看看属性flex-direction，顺序指定了弹性子元素在父容器中的位置。flex-direction拥有四个值，分别是

知道了flex-direction属性，我们来看看flex-wrap的，flex-wrap属性用于指定弹性盒子的子元素换行方式。拥有着三个值，分别是：

还有flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

语法：

.box {

flex-flow: ||
;

}

好了，弹性盒子的上部分到此结束，剩余的属性下次我再和大家一起来看看到底是什么。

Flex 弹性布局（上）相关推荐

移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
微信小程序开发（三)——IE盒子，Flex弹性布局，色子六面
目录 ie盒子模型 Flex弹性布局三大特性: 块元素和内联元素的转换 background-image背景图片尺寸单位rpx 定位练习:色子的六面 ie盒子模型盒子模型是css中一个重要的概 ...
移动端基础（2）—— flex弹性布局
一.flex弹性布局 flexible-box-layout 弹性盒式模型,它能更加高效的控制元素的对齐.排列,更重要的是能够自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的. 父元素( ...
flex弹性布局教程-04项目属性flex-grow
本节目标掌握flex-grow的使用. 掌握flex-grow放大的计算公式(难点). 掌握编写导航条的技巧. 内容摘要本篇介绍了项目属性 flex-grow,用于定义项目的扩大系数,用于分配容器 ...
flex弹性布局教程-03-项目属性flex-basis
本节目标掌握 flex-basis 的用法. 了解 flex-basis 和 width 的不同. 阅读时间大约5分钟. 内容摘要本篇介绍了 flex 项目属性的第一个 flex-basis ,用 ...
flex弹性布局教程-10容器属性justify-content
本节目标掌握justify-content的基础使用. 掌握项目多列排列使用justify-content对齐的技巧. 内容摘要本篇介绍了容器属性justify-content,用来设置项目在主轴 ...
什么是Flex弹性布局
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
移动端常见布局方式(流式布局、flex弹性布局、less+rem+媒体查询、Bootstrap)
目录一:移动端页面 1.流式布局(百分比布局) 2.flex弹性布局(重点♥) flex布局初体验: flex布局原理: flex布局父项常见属性 flex-direction 设置主轴的方向 ♥ ...
flex弹性布局教程-09-容器属性flex-flow
本节目标掌握flex-flow的使用,flex-flow是flex-direction和flex-wrap的合集. 掌握上左右下的布局编写技巧. 内容摘要本篇介绍了容器属性 flex-flow,是 ...

Flex 弹性布局（上）

Flex 弹性布局（上）

Flex 弹性布局（上）相关推荐

最新文章

热门文章