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;

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

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

  1. 你真的搞懂了Java中的<<、>>、>>>运算符嘛?

    在搞懂<<.>>.>>>之前,我们需要先了解二进制中的源码.反码.补码... 二进制中的原码.反码.补码 有符号数: 对于有符号数而言,符号的正.负机器是无法 ...

  2. Flex属性你真的搞清楚了吗?我深表怀疑

    背景 在使用弹性布局实现两侧宽度固定,中间宽度自适应的效果时,发现自己理解的和实际效果不一致,所以亲自实践验证了一个flex属性的诸多场景的表现,不仅解开了我之前使用过程遇到的疑惑,而且发现了许多自己 ...

  3. 你真的搞懂ES6模块的导入导出规则了吗

    前言 模块作为ES6规范的核心部分之一,在实际项目开发中经常会看到它的身影,那么我们是否真正了解它的相关规则呢,今天就带大家一起了解一下模块的导入导出规则 导入 ES6模块的导入(即import)大致 ...

  4. 别再人云亦云了!!!你真的搞懂了RDD、DF、DS的区别吗?

    几年前,包括最近,我看了各种书籍.教程.官网.但是真正能够把RDD.DataFrame.DataSet解释得清楚一点的.论据多一点少之又少,甚至有的人号称Spark专家,但在这一块根本说不清楚.还有国 ...

  5. 小伙子,你真的搞懂 transient 关键字了吗?

    先解释下什么是序列化 我们的对象并不只是存在内存中,还需要传输网络,或者保存起来下次再加载出来用,所以需要Java序列化技术. Java序列化技术正是将对象转变成一串由二进制字节组成的数组,可以通过将 ...

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

    晨叔周刊,每周一话题,技术天天涨. 本周的话题是JS的内存问题(加入本周话题,请点击传送门). 图 话题入口 今天的技术晨报来,就来谈谈JS中变量的,值传递和引用传递的问题.现在,对于很多的JSer来 ...

  7. 彻底搞懂flex弹性盒模型布局

    为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...

  8. 30分钟彻底弄懂flex布局

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由elson发表于云+社区专栏 目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布 ...

  9. 弄懂flex布局

    目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也 ...

随机推荐

  1. Safari配置WebApp----添加启动图和桌面图标让你的WebApp在ios设备上体验如原生一样

    现在很多开发者的Web应用程序的设计样式和交互类似本机应用程序,例如,它的缩放比例适合iOS上的整个屏幕.当用户将其添加到主屏幕时,您可以通过使其看起来像本机应用程序一样,在iOS上为您的Web应用程 ...

  2. chorme浏览器记住密码后input黄色背景处理方法总结(三种)

    问题分析 正常情况: 记住密码后访问: 解决方法 方法1:阴影覆盖input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white ins ...

  3. React官方脚手架不支持less问题解决

    create-react-app是由React官方提供,并推荐构建React单页应用程序的最佳方法,但是默认不支持less,需要手动集成: 1,必须手动安装less npm install less ...

  4. 写react项目要注意的事项

    1,className一定是大写字母开头,例如:App-logo,App,App-header. 2,有关react元素的更新,唯一办法是创建新元素,然后重新将其传入ReactDOM.render() ...

  5. 10个机器学习人工智能开发框架和AI库(优缺点对比表)/贪心学院

    概述 通过本文我们来一起看一些用于人工智能的高质量AI库,它们的优点和缺点,以及它们的一些特点. 人工智能(AI)已经存在很长时间了.然而,由于这一领域的巨大进步,近年来它已成为一个流行语.人工智能曾 ...

  6. 手机app抓包工具,安卓手机adb无线连接

    默认手机已经usb调试配置完成 网络必须在同一网络中,每次断开wifi连接,都必须重新重做一次 使用数据线连接电脑 cmd 打开一个命令行 输入 # abd如果没有配置环境变量,请配置或者进入adb文 ...

  7. app之---豆果美食

    1.抓包 2.代码 抓取: #!/usr/bin/env python # -*- coding: utf-8 -*- #author tom import requests from multipr ...

  8. jQuery实现颜色打字机

    效果:每个字逐个显示出来,并且每个字都有随机颜色 $(function(){ var str="早起的鸟儿有虫吃,早起的虫儿被鸟吃!由此天赋+勤奋=成功;先天不足+同等勤奋=还是失败!天赋的 ...

  9. 测试必知必会系列- Linux常用命令 - mv

    21篇测试必备的Linux常用命令,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1672457.html 移动当 ...

  10. ubutu 12.04

    1.[系统设置]->[外观]->[行为]->[自动隐藏启动器],隐藏左侧边栏后,可以按快捷键[CTRL+a]弹出侧边栏. 2.QtCreator调试,提示[ptrace不允许的操作] ...