初步学习弹性布局

syoya 发布于2019-08-29 13:50 / 1797人阅读

摘要：今天刚刚学习了微信小程序，学习微信小程序之前首先得熟悉弹性布局如果把一个元素设置为，它的所有子元素都成为容器成员，称之为项目，并且，子元素的和属性都会失效。以下介绍弹性布局设置在容器上的种属性。与交叉轴两端对齐，轴线之间的间隔平均分布。

今天刚刚学习了微信小程序，学习微信小程序之前首先得熟悉弹性布局

如果把一个元素设置为display:flex，它的所有子元素都成为容器成员，称之为项目，并且，子元素的float,clear和vertical-align属性都会失效。以下介绍弹性布局设置在容器上的6种属性。

flex-direction

flex-wrap

flex-flow

justify-content

align-content

align-items

1.flex-direction 决定主轴（容器默认存在两根轴：水平的主轴和垂直的交叉轴，项目默认沿主轴排列）的方向




Document

效果图如下：

代码中将flex-direction设为row,即主轴在水平方向，也是flex-direction的默认值，flex-direction可以设置4个值，其他三个值与其对应的效果图如下：

  flex-direction:row-reverse;

  flex-direction:column;

  flex-direction:column-reverse;

2.flex-wrap 定义项目在一条轴线排不下时决定它怎么换行，代码就不放出来了，就是直接在上面代码的.flex-flow{}中添加flex-wrap属性，它有3个取值

 flex-wrap:nowrap; 不换行，也是默认值
 
 flex-wrap:wrap;换行，第一行在上面，排不下的继续往下面排
 
 flex-wrap:wrap-reverse; 换行，和wrap相反，第一行在下面，排不下的往上方排

是不是很简单

3.flex-flow 是flex-direction flex-wrap的简写形式，默认就是flex-flow:row nowrap,组合起来取值有12种情况；

4.align-items 定义项目在交叉轴上如何对齐，还是要放一小段代码

这段代码就是在第一段代码的基础上添加了6个项目，选中所有的与flex-item类同一辈并且是2的倍数的元素，将高设置为200px,并添加了align-items属性，align-items:flex-start;交叉轴的起点对齐效果图如下：

align-items: stretch;如果项目没有设置高度，将会占满整个容器的高度，也是该属性的默认值

align-items：flex-end;与交叉轴的终点对齐

align-items: center;与交叉轴的中点对齐

align-items: baseline;与项目中第一行文字的基线也就是底部对齐

5.align-content定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不会起任何作用，这个属性有6个取值，分别是：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一
倍。
stretch（默认值）：轴线占满整个交叉轴。

这里就不放图了，看了上面的几个这里应该很容易理解，别问我为什么，因为懒

6.justify-content定义了项目在主轴上的对齐方式，该属性有5个取值，分别是：
flex-start：左对齐，也是默认值
flex-end：右对齐
center：居中
space-between：两边对齐，项目之间的间隔相等。
space-around：每个项目两侧间隔相等。
不放效果图，还是因为懒

这里只介绍了采用flex布局的容器的属性，后续可能会有更多，也有可能没有（微笑脸），哈哈哈，如有不足，请不吝指出，谢谢。

海外云主机服务器托管 hadoop初步学习计算机的初步学习学习css布局人工智能初步

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112746.html

初步学习弹性布局

摘要：今天刚刚学习了微信小程序，学习微信小程序之前首先得熟悉弹性布局如果把一个元素设置为，它的所有子元素都成为容器成员，称之为项目，并且，子元素的和属性都会失效。以下介绍弹性布局设置在容器上的种属性。与交叉轴两端对齐，轴线之间的间隔平均分布。今天刚刚学习了微信小程序，学习微信小程序之前首先得熟悉弹性布局showImg(https://segmentfault.com/img/bVYNPQ?...

Code4App 2019-08-01 18:01 评论0 收藏0
CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0
学习关于display ：flex 布局问题！

摘要：什么是呢答是的缩写，意为弹性布局这个东西的引入，为盒模型提供了最大的灵活性可以相应式的实现各种页面的布局。基本概念采用布局的元素，称为容器，简称容器。在这个容器中默认存在两个轴水平方向的主轴和垂直方向上的交叉轴。很多人不明白这个display:flex是到底是什么东西，如何使用的。 1.什么是display：flex呢？答：flex是 flexible box的缩写，意为弹性布局；...

番茄西红柿 2019-04-23 13:27 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0