flex布局你真的搞懂了吗?通俗简洁,小白勿入~

flex布局

  用以代替浮动的布局手段;

  必须先把一个元素设置为弹性容器;//display:flex;

  一个元素可以同时是弹性容器和弹性元素;

  设为flex布局以后,子元素的float、clear和vertical-align属性将失效。

  主轴:弹性元素排列的方向;

弹性容器的属性

1、flex-direction 决定主轴的方向

  row:默认值,从左到右;

  row-reverse:从右到左;

  column:从上到下;

  column-reverse:从下到上;

2、flex-wrap 决定是否换行

  nowrap:默认值,不换行;

  wrap:换行,第一行在上方;

  wrap-reverse:换行,第一行在下方;

3、flex-flow

  flex-direction和flex-wrap的简写形式,默认值是row nowrap;

  //flex-flow: row wrap;

4、 justify-content 决定弹性元素在主轴上的对齐方式

  flex-start:默认值,左对齐;

  flex-end:右对齐;

  enter: 居中;

  space-between:两端对齐,弹性元素之间的间隔都相等(两侧的弹性元素与边框没有距离);

  space-around:每个弹性元素两侧的间隔相等(弹性元素之间的间隔比弹性元素与边框的间隔大一倍)

5、align-items 决定子元素如何在父盒子中垂直对齐(单行)

  flex-start:沿辅轴的起点对齐,从起点一直排向(带箭头的)终点;

  flex-end:沿辅轴的终点对齐,从终点一直排向起点;

  center:居中对齐;

  baseline: 基线对齐;

  stretch:默认值,让子元素拉伸以适应父元素(子元素不给高度的前提下);

6、align-content 决定多行垂直对齐的情况(对单行无效)

  该属性生效的条件:

  必须对父元素设置自由盒属性//display:flex;

  并且设置排列方式为横向排列//flex-direction:row;

  并且设置换行//flex-wrap:wrap;

  属性值:

    1)stretch:默认值,会拉伸容器内每一行的占用的空间,填充方式为给每一行的下方增加空白;

      第一行默认从容器顶端开始排列。

    2)取消行与行之间的空白并把所有行作为一个整体,

      center:在纵轴上垂直居中;

      flex-start:放在容器的顶部;

      flex-end:放在容器的底部;

    3)space-between:上面的行对齐容器顶部,最下面行对齐容器底部。留相同间隔在每个行之间。

      (对齐就是贴紧,没有留空隙);

       space-around:每一行的上下位置保留相同长度空白,使得行之间的空白为两倍的单行空白。

弹性元素的属性

1、order 决定子元素的排序

  数值越小越往前,可为负,默认为零;//order:1;

2、 flex-grow

  决定子元素的伸展系数,在父元素的剩余空间中按比例分配;//flex-grow :1;

  如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话);

  如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

3、flex-shrink

  决定子元素的收缩系数,当父元素的空间不足以容纳所有子元素;//flex-shrink :1;

  如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小;

  如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

4、flex-basis

  指定的是子元素在主轴的基础长度;

  若主轴为横向,则该值指定的是宽度,即纵向指定的是高度;

  默认值是auto,表示参考元素自身的宽/高,有传具体数值则以该值为准;

5、flex :增长 缩减 基础

  flex-grow 、flex-shrink 、flex-basis的简写属性;

  initial --- flex: 0 1 auto;

  auto --- flex: 1 1 auto;

  none --- flex: 0 0 auto;弹性元素没有弹性,不缩不减;

6、align-self

  允许单个子元素有与其他子元素在纵轴上不一样的对齐方式,可覆盖align-items属性;

  默认值为auto,表继承父元素的align-items属性,如果没有父元素,就等同于stretch

  属性值: auto 、flex-start 、 flex-end 、 center 、baseline 、 stretch;

//花了两个小时整理,对我来说挺有用的,越是难点越要突破,一起加油叭,冲冲冲!!

原文地址:https://www.cnblogs.com/isremya/p/12639957.html

时间: 2024-10-03 23:10:34

flex布局你真的搞懂了吗?通俗简洁,小白勿入~的相关文章

你真的搞懂什么是线框图,什么是原型图了吗?

设计师朋友们都知道,在网站开发或者手机应用开发的前期阶段,需要创建线框图和原型图给客户展示.但有时候客户会提出略过线框图和原型图设计的阶段,直接过渡到网站的界面设计甚至是开发阶段.这种想法,往往是源于客户不明白什么是线框图,什么是原型图,以及二者在整个项目阶段中的重要性. 首先阐明一个误区,线框图不等于原型图.明确了这个概念之后,我们再来区分二者. 1. 什么是线框图? 线框图是一个网站图形化的骨架,引导一个页面的内容及概念,能够帮助设计师和客户讨论具体的网站层次和导向.一个简单的线框图只需要使

晨叔技术晨报: 你真的搞懂JS中的“值传递”和“引用传递”吗?

晨叔周刊,每周一话题,技术天天涨. 本周的话题是JS的内存问题(加入本周话题,请点击传送门). 图 话题入口 今天的技术晨报,就来谈谈JS中变量的,值传递和引用传递的问题.现在,对于很多的JSer来讲,基本不关心堆和栈的问题,代码照样666. 但是,现在的前端,不再是传统的JQ时代,而是MVVM,组件化,工程化.前端的承载着复杂业务逻辑.为此,内存问题,成为JSer必须要考虑的问题. 本文从堆栈讲起,让大家理解JS中变量的内存使用以及变动情况 . 一.初步了解堆栈  先初步了解JS中的堆和栈,首

30分钟彻底弄懂flex布局

目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也有不少flex布局的教程,为什么又要再写一篇? 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. 容器属性 flex-flow flex-direction flex-wrap justify-content

搞懂Xamarin.Forms布局,看这篇应该就够了吧

Xamarin.Forms 布局介绍 什么是布局?可以简单的理解为,我们通过将布局元素有效的组织起来,让屏幕变成我们想要的样子! 我们通过画图的方式来描述一下Xamarin.Forms的布局. 小节锚点: 布局控件之StackLayout Xamarin.Forms 中可以C#代码进行布局 Xamarin.Forms 的布局方向 边距和填充 八种布局选项 布局控件之Grid 布局控件之AbsoluteLayout 布局控件之ScrollView 布局控件之RelativeLayout 布局控件之

2017年总结的前端文章——一劳永逸的搞定 flex 布局

flex 基本概念 使用 flex 布局首先要设置父容器 display: flex,然后再设置 justify-content: center 实现水平居中,最后设置 align-items: center 实现垂直居中. <div class="box"> <div class="dad"> </div> </div> CSS: .box{ width: 400px;height: 400px;border: 1p

《大话西游》20年后重映(附影评:《大话西游》你真的看懂了吗?)

2014-10-25 02:43:24 来源: 北京日报(北京) 本报讯 (记者 周南焱)"电影里的台词差点儿都能背,但在影院里再看还是会笑.看到最后紫霞仙子死的时候.还是忍不住落泪! "昨天下午,经典老片<大话西游>在海航活力天宝影城又一次上映,一位重温影片的观众如是说.还有观众反映,用如今的电影技术水准来看,<大话西游>确实有点老土,但从内容来看还是那么亲切. 周星驰主演的<大话西游>20年前公映,当时票房大败. 但谁也没想到,该片通过盗版光碟和

转:阮一峰Flex 布局教程:实例篇

作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solved by Flexbox. 一.骰子的布局 骰子的一面,最多可以放置9个点. 下面,就来看看Flex如何实现,从1个点到9个点的布局.你可以到codepen查看Demo. 如果不加说明,本节的H

Flex 布局2

Flex 布局2 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solved by Flexbox. 一.骰子的布局 骰子的一面,最多可以放置9个点. 下面,就来看看Flex如何实现,从1个点到9个点的布局.你可以到codepen查看Demo. 如果不加说明,本节的HTML模板一律如下. <div class="box"> <

Flex 布局教程:实例篇

本文转载自阮一峰,介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solved by Flexbox. 一.骰子的布局 骰子的一面,最多可以放置9个点. 下面,就来看看Flex如何实现,从1个点到9个点的布局.你可以到codepen查看Demo. 如果不加说明,本节的HTML模板一律如下. <div class="box