flex 意思是弹性布局,用来给盒模型提供最大的灵活度,指定容器中的项目为弹性布局,类似于float:left;

比float的好处是容器没有设置高度,会根据项目来自适应高度,我们都知道,设置float属性,如果没有设置高度,那么容器会脱离文档流,需要清除浮动,才可以根据项目的高度规定高度。

父元素称之为容器,子元素称之为项目

水平的方向叫主轴, 水平和垂直交叉点,称之为交叉轴

flex中如果子元素中的总宽度不超过父级,那么就正常排列,

flex中如果子元素中的总宽度超过父元素,那么就按照父级的宽度均分,而且不受边框和内边距的影响
下面是代码,设置了display:flex,容器中的项目则自动左浮动,且ul没有设置高度,

效果

flex-direction 改属性决定了项目(即子元素)排列的方向

row(默认值)水平方向左以左边为起点排列

row-reverse 水平方向以右边终点为起点排列

代码

效果

column 垂直方向,起点在左上角

代码

效果

column-reverse 垂直方向,起点在下边,类似于把子元素翻转了

代码

效果

flex-wrap:wrap 设置了该属性,如果子元素的宽度超出了父元素的宽度,则会换行

上面说了设置了dispay:flex,flex中如果子元素中的总宽度不超过父级,那么就正常排列(按照实际像素排列),

flex中如果子元素中的总宽度超过父元素,那么就按照父级的宽度(按百分比)均分,而且不受边框和内边距的影响
 
我们有时候想即使子元素的宽度超过了父元素的宽度,想让子元素不按照百分比,按照实际像素换行,那么我们可以设置flex-wrap;wrap
 下面的子元素的总宽度明显超出了父元素的总宽度,超出则按照父元素宽度的百分比排列,子元素的实际宽度失效。

效果

那么我想让子元素的宽度即使超出了父元素的宽度,不需要按照百分比,则是按照子元素的实际宽度排列,我们这里可以设置flex-wrap:wrap属性就可以

效果如下

可以看出设置了flex-wrap:wrap,子元素的宽度超出了父元素的宽度,就按照子元素的实际宽度排列,就会换行。

flex弹性盒模型的更多相关文章

  1. Flex 弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Web的Flex弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

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

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

  5. columns分栏与flex弹性盒模型

    columns  分栏 值:column-width:设置每列的宽度        column-count:设置列数   例:columns{200px 3}   列数和宽度固定        co ...

  6. box flex 弹性盒模型(转载)

    css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...

  7. 彻底弄懂css3的flex弹性盒模型

    由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...

  8. Flex弹性盒模型(新老版本完整)--移动端开发整理笔记(二)

    Flex布局 Flex即Flexible Box,写法为:display:flex(旧版:display: -webkit-box) 在Webkit内核下,需要加-webkit前缀: .box{ di ...

  9. flex 弹性盒模型的一些例子;

    1.垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. iOS KVC/KVO 线程(GCP)

    最近比较忙,把学习知识点的帖子的地址记一下,有时间再好好整理. KVC/KVO1 KVC/KVO2 线程(GCP)

  2. jsp登陆

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  3. LRC CRC 纵向冗余码校验

    LRC CRC 纵向冗余码校验   2010-01-26 11:00:15|  分类: 电气 |  标签: |字号大中小 订阅  1.LRC校验  LRC域是一个包含一个8位二进制值的字节.LRC值由 ...

  4. mysql的三大范式

    关系数据库的几种设计范式介绍: 第一范式:确保每列的原子性(强调的是列的原子性,即列不能够再分成其他几列). 如果每列(或者每个属性)都是不可再分的最小数据单元(也称为最小的原子单元),则满足第一范式 ...

  5. 使用PHPEXCEL导入数据到数据库

    导出功能参考:http://www.cnblogs.com/zhouqi666/p/5978017.html 比较严重的问题:当遇到excel数据量比较大的时候,会发生内存溢出的情况,目前无法解决 e ...

  6. WEB将本地项目添加到git

    前提下载好git bush1.找到对应的文件夹git init2.Windows下打开Git Bash$ ssh-keygen -t rsa -C "myaccount@example.co ...

  7. wireshark问题现象分析

    讲的非常透彻:建议学习 wireshark问题现象分析1:参考博客1 https://blog.csdn.net/u012398362/article/details/52276067 wiresha ...

  8. 2017.3.31 spring mvc教程(三)拦截器

    学习的博客:http://elf8848.iteye.com/blog/875830/ 我项目中所用的版本:4.2.0.博客的时间比较早,11年的,学习的是Spring3 MVC.不知道版本上有没有变 ...

  9. MySQL高可用解决方案MMM

    一.MMM简介: MMM即Multi-Master Replication Manager for MySQL:mysql多主复制管理器,基于perl实现,关于mysql主主复制配置的监控.故障转移和 ...

  10. 常用的二种修改mysql最大连接数的方法

    方法一:进入MYSQL安装目录 打开MYSQL配置文件 my.ini 或 my.cnf查找 max_connections=100   修改为 max_connections=1000 服务里重起MY ...