flex弹性布局的用法

1、概念：

flex弹性布局是css3的新一种布局方式，用来为盒状模型提供最大的灵活性，元素根据窗口大小变化而自动伸长或缩短，使得整个页面格式保持不变。

2、用法：

1)首先在我们不使用flex弹性布局时候它们排列是默认这样的，是纵向排列的，如下图

2）使用flex弹性布局时，它们的排列是这样的，变成横向排列，需要注意的是display:fex必须放在子级的父级上，如下图

3）flex弹性布局的一些常用的属性：也需要注意的是使用它们也需要加个display:flex一起使用。

1.flex-direction：

flex-direction用于改变弹性布局的主轴方向。

加display：flex会默认添加flex-direction：row属性，所以加弹性布局后，子元素的默认主轴方向会从上到下变为从左到右。

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

2.justify-content：

justify-content用于控制元素在主轴上的对齐方式。默认flex-start左对齐。

应用场景：常用于元素的两端对齐。

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，元素之间的间隔都相等。

space-around：每个元素两侧的间隔相等。

3.align-items：

align-items用于控制元素在交叉轴上对齐方式。

应用场景：配合justify-content属性使用，完成子元素的垂直水平居中

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

4.flex-wrap：

flex-wrap用于控制元素是否换行，默认nowrap不换行

应用场景：在弹性布局中，子元素的宽的总和大小大于父元素时，默认不换行，会对子元素造成压缩导致数据显示不全的问题。

nowrap（默认）：不换行。此时父级宽度为600px，而子级宽度为150加起来已经超过父子宽度，使用flex时，默认是nowrap不会自动换行，保持在一行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

5、如何让子级处在水平垂直居中。

flex弹性布局的用法相关推荐

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

flex弹性布局的用法

flex弹性布局的用法相关推荐

最新文章

热门文章