1,display:flex

  这个在父容器中声明;

2,flex-direction:row / column

  默认为横向,也在父容器中设置,定义flex布局的主轴方向;一条轴为主轴,那么另一条轴自然而然就是副轴;

3,flex:1

  在子元素中设置,表示所有的子元素不管内容如何,其宽度和高度都完全一样,且加起来刚好充满父容器;

4,align-items:center | flex-start | flex-end | space-between | space-around

  这个表示元素在副轴方向上的排列;

5,justify-content:center | flex-start | flex-end | space-between | space-around

  表示元素在主轴方向上的排列,在父容器中设置,center代表所有元素挤到最中间显示,如下:

  而space-between则意味着空格将主要处于横向页面的中间,换言之,左右两边界没有空隙,效果如下:

  space-around则代表所有的子元素左右间隙相等,左右边界均有空隙,效果如下:

6.flex-wrap:no-wrap(默认)  |  wrap

  这是关于是否换行的问题,如已经设置子元素的大小,但子元素的数量加起来长度超过屏幕一行,那么因为默认是不换行的,子元素原来被设置的宽度将被压缩,所有子元素硬挤在一行显示,如下。

  

  更改属性flex-wrap:wrap,让其换行显示,子元素的宽高又恢复正常,看下图

flex布局常见用法小结的更多相关文章

  1. Flex 布局相关用法

    前言: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 就不容易实现. 2009年,W3C提出了 ...

  2. C++ 指针常见用法小结

    1. 概论 2.指针基础 3. 指针进阶 4. 一维数组的定义与初始化 5. 指针和数组 6. 指针运算 7. 多维数组和指针 8. 指针形参 9. 数组形参 10. 返回指针和数组 11. 结语   ...

  3. flex布局相关用法

    /* pages/classic/classic.wxss */ .chunk { /* 行内元素可设置但是设置了flex,无效了 *//* display: inline-block; */ wid ...

  4. flex布局开发

    flex布局开发 布局原理 flex时flexible Box的缩写,意为"弹性布局",用来为盒子模型提供最大的灵活性,任何一个容器都可以定位flex布局 [注意] 当我们为父盒子 ...

  5. flex布局使用方法简要汇总

    近期因为使用inline-block,在项目部署后出现了一点小问题,几番解决未果,遂使用flex布局,于是借此机会对flex布局的用法做一个简要的汇总. 遇到的bug如下: 本想两个div使用inli ...

  6. 用Flex实现常见的几种布局

    用Flex实现常见的几种布局 1.水平,垂直居中. <style type="text/css"> .container{ display: flex; width: ...

  7. 理解CSS3里的Flex布局用法

    一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ disp ...

  8. 三大Flex布局用法(转载)

    Flex布局基础 对于Flex 初学者,在Hello World之后,Flex布局便是下一站学习要的要义.若是从传统的Html转变而来,总希望找到类似于Div/Table/UL等之类的控件,也希望在 ...

  9. React Native 中的 Flex Box 的用法(水平布局、垂直布局、水平居中、垂直居中、居中布局)

     版权声明:本文仅供个人学习. CSS 中 Flex-Box 语法链接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 是 ...

随机推荐

  1. sourceInsight4 完美破解

    sourceInsight4 完美破解 参考路径: https://blog.csdn.net/zxy020/article/details/75047670 首先确保你在官网下载了原版4.0并安装好 ...

  2. Jmeter 聚合报告---测试结果分析

    当我们测试完后,最关心就是结果数据了,下面一起来分析Jmeter聚合报告数据. 首先来看下Jmeter的help是如何解释这些含义的. 1.Label - The label of the sampl ...

  3. 关于git的一些命令

    git命令 1.git init 初始化仓库 2.git status 查看当前状态 3.git add -A(提交所有的) 提交本地文件到缓存区 4.git commit -m"提交信息& ...

  4. ELK的高级篇(测试记录各种日志)

    一.elk架构已经完成情况情况下  访问限制: 加个x-pack插件  1)一个脚本收集多个日志,if 判断写入es的索引 [root@k8s6 conf.d]# cat file.conf inpu ...

  5. linux (ubuntu) 命令学习笔记

    1, md5sum 输出字符串的MD5值 echo -n 123456 | md5sum //-n表示不打印回车符 2, ubuntu设置dock任务栏鼠标点击效果 16.04: 调整位置:gsett ...

  6. Linux挂载NAS 网络附属存储

    在工作中经常听到NAS,比如做数据交换,将数据从DB2数据库,导入到ORACLE数据库,采用BCP的方式,首先将DB2导出为文件,再从文件导入到ORACLE.那么中间需要一个很大的存储空间来保存从DB ...

  7. 解决windows server在关闭远程桌面后开启的服务也随之关闭的问题

    首先远程登录服务器,关闭所有tomcat进程以及所有java进程,使用 netstat命令检查tomcat端口是否仍在监听状态,如仍在监听,使用taskkill杀死进程, 接下来关闭系统tomcat服 ...

  8. 【adb】执行adb devices 设备offline

    解决办法: 1.执行adb kill-server,在执行adb devices 2.重启手机 ---------------------------------------------------- ...

  9. 协程 及 libco 介绍

    libco 是腾讯开源的一个协程库,主要应用于微信后台RPC框架,下面我们从为什么使用协程.如何实现协程.libco使用等方面了解协程和libco. why协程 为什么使用协程,我们先从server框 ...

  10. 酷炫,用Html5/CSS实现文字阴影

    前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...