HTML的弹性布局用法

HTMl中的弹性布局的实际用法

弹性布局是html中十分方便的一个布局，它可以让结构中的内容自适应不同的分辨率，简化了许多繁琐的代码，今天就简单来介绍一下弹性布局的用法。

弹性布局：
display:flex;顾名思义，就是让内容变得像弹簧一样具有弹性，在需要内容自适应的结构中，它是一个极其方便的工具，它分为主轴和侧轴两个轴，就像X轴跟Y轴一样。

弹性布局的语法分为两块儿：一.加给父容器的语法。二.加给内容的语法。
加给父容器的语法有：
display:flex;
flex-direction:row / column / row-reverse / column-reverse ;
flex-wrap: nowwrap / wrap / wrap-reverse ;
jusitfy-content: flex-start / flex-end / center / space-between / space-around / space-evenly ;
align-content: flex-start / flex-end / center / space-between / space-around / space-evenly ;
align-items： stretch / flex-start / flex-end / center；

加给子元素的语法有：
flex-grow:0~1 ;
flex-shrink:0~1 ;
flex-basis: 具体值;

display:flex;就是将容器转变成一个弹性盒子

flex-direction：；就是确定主轴的方向，row水平为主轴，column垂直为主轴。-reverse就是反向，默认水平方向为主轴。

flex-wrap：；内容放不下时是否折行。默认不折行nowrap。

jusitfy-content：；主轴方向上的对齐方式。

flex-start ： 子项都去起始位置对齐。
flex-end ： 子项都去结束位置对齐。
center ： 子项都去中心位置对齐。
space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧                     的空白只有中间空白宽度一半。
space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

align-content：；侧轴方向上的对齐方式。

flex-start ： 子项都去起始位置对齐。
flex-end ： 子项都去结束位置对齐。
center ： 子项都去中心位置对齐。
space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
注意！：(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)，并且有一行它就会把整个容器等分成几份。没有高度时设置除了默认值以外的值他的高度会由内容决定

align-items：；

Stretch默认值
flex-star
flex-end
Center

子元素：
flex-grow：；

0~1（默认为0）
子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙。

flex-shrink：；

1~0（默认为1）
0表示不收缩，.5收缩小一些，2收缩大一些。（大小是跟正常缩放1进行比较的）
写0时，他就不收缩了，内容过了会溢出。一些特殊需求会用到

下面时弹性布局的注意点，非常用一犯错。

1.默认情况下，在弹性盒子中的子元素的左右排列的。

2.水平是主轴的时候：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器决定。
垂直是主轴的时候：默认情况下，当宽高不写的时候，宽度由父容器决定，高度由内容决定。

3.当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）

4.当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。

5.弹性布局中用的频率比较多的语法：
display : flex;
flex-direction;
justify-content;
align-items;
flex;

下面写一个弹性布局的基本结构：

没有加弹性的时候默认垂直排列，如下：

<style>*{margin: 0;padding:0;}#father{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;}#father div{width: 100px;height: 100px;}#father .one{background: red;}#father .two{background: green;}#father .three{background: gray;}</style>
</head>
<body><div id="father"><div class="one"></div><div class="two"></div><div class="three"></div></div>
</body>

给父容器#father加上弹性，默认主轴方向为水平方向：

<style>*{margin: 0;padding:0;}#father{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;display: flex;}#father div{width: 100px;height: 100px;}#father .one{background: red;}#father .two{background: green;}#father .three{background: gray;}</style>
</head>
<body><div id="father"><div class="one"></div><div class="two"></div><div class="three"></div></div>
</body>

此时他会像浮动一样水平排列，并且比浮动的操作方式更简洁。

我们再让改变他的主轴方向上的排列形式：

<style>*{margin: 0;padding:0;}#father{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;display: flex;justify-content: space-around;}#father div{width: 100px;height: 100px;}#father .one{background: red;}#father .two{background: green;}#father .three{background: gray;}</style>

<style>*{margin: 0;padding:0;}#father{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;display: flex;justify-content: space-evenly;}#father div{width: 100px;height: 100px;}#father .one{background: red;}#father .two{background: green;}#father .three{background: gray;}</style>

可以明显看出space-around与space-evenly的区别。

<style>*{margin: 0;padding:0;}#father{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;display: flex;justify-content: space-between;}#father div{width: 100px;height: 100px;}#father .one{background: red;}#father .two{background: green;}#father .three{background: gray;}</style>

侧轴上的则与主轴上的差不多，但是他最少需要两行才能看出效果，上面也说到过。

<style>*{margin: 0;padding:0;}#father{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;display: flex;flex-wrap: wrap;justify-content: space-between;align-content: space-between;}#father div{width: 100px;height: 100px;}#father .one{background: red;}#father .two{background: green;}#father .three{background: gray;}</style>
</head>
<body><div id="father"><div class="one"></div><div class="two"></div><div class="three"></div><div class="one"></div><div class="two"></div><div class="three"></div></div>
</body>

侧轴便之举一个例子了。

<style>*{margin: 0;padding:0;}#father{width: 500px;height: 500px;border: 1px solid black;margin: 20px auto;display: flex;justify-content: space-between;align-items: flex-end;}#father div{width: 100px;height: 100px;}#father .one{background: red;}#father .two{background: green;}#father .three{background: gray;}</style>
</head>
<body><div id="father"><div class="one">测试文字测试文字</div><div class="two">测试文字测试文字</div><div class="three">测试文字测试文字</div></div>
</body>

align-items与align-content的区别：
align-content:center对单行是没有效果的,而align-items:center不管是对单行还是多行都有效果,其实在正常的开发中align-items用的更多这点一定要记住区别。

弹性布局的简单介绍就这么多，想要更深入的了解弹性布局的特性还是需要多敲代码看看不同代码的不同点，这样更容易理解。

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

CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
什么是Flex弹性布局
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
flex弹性布局的用法
1.概念: flex弹性布局是css3的新一种布局方式,用来为盒状模型提供最大的灵活性,元素根据窗口大小变化而自动伸长或缩短,使得整个页面格式保持不变. 2.用法: 1)首先在我们不使用flex弹性布 ...
弹性布局之em的用法！
什么是弹性布局? 用户的文字大小与弹性布局用户的浏览器默认渲染的文字大小是"16px",换句话说,Web页面中"body"的文字大小在用户浏览器下默认渲染是& ...
淘宝弹性布局方案lib-flexible实践
2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...
移动端基础（2）—— flex弹性布局
一.flex弹性布局 flexible-box-layout 弹性盒式模型,它能更加高效的控制元素的对齐.排列,更重要的是能够自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的. 父元素( ...
html弹性布局平均分配,flex弹性布局.html
弹性布局 .box { height: 300px; background-color: #ccc; /* 重点记住下面三个:display: flex; justify-content:center ...
CSS3 弹性布局/伸缩布局 flex
CSS3 之弹性布局 flex 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...
超详细的flex弹性布局+实例分析
1.基本概念什么是flex? flex全称是FlexibleBox,即弹性盒子,用来进行弹性布局,弹性布局也是目前前端应用最广的布局之一. flex布局的优点,为什么要用flex布局? 1.可以为盒 ...
flex弹性布局教程-03-项目属性flex-basis
本节目标掌握 flex-basis 的用法. 了解 flex-basis 和 width 的不同. 阅读时间大约5分钟. 内容摘要本篇介绍了 flex 项目属性的第一个 flex-basis ,用 ...

HTML的弹性布局用法

HTMl中的弹性布局的实际用法

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

最新文章

热门文章