Flex布局,俗称弹性布局,有了这个布局,咱们做的事情很多,以前那些很难实现比如说垂直居中之类都不存在了。

盒模型布局依赖于float,display,定位之类的方式来布局,这种的布局对一些特殊布局来说很不方便,就如上面的垂直居中就不太好实现。

现在就让我来介绍一个Flex布局方式

他中的一些属性:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

在这里,声明一点,使用了display:flex;布局,其子元素内的floatclearvertical-align属性将失效

flex-direction属性

.box {
flex-direction: row | row-reverse | column | column-reverse;
}
  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

flex-wrap属性

.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

(1)nowrap(默认):不换行。

(2)wrap:换行,第一行在上方。

(3)wrap-reverse:换行,第一行在下方。

flex-flow属性

.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

justify-content属性


.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

align-items属性

align-items属性定义项目在交叉轴上如何对齐

.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

align-content属性

.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。


浅谈flex布局的更多相关文章

  1. 浅谈flex布局中小技巧

    最近有个面试,面试官问到,在一个横向布局上,假设有三个div,每个宽度为定宽apx,如果想使两侧宽度为x,中间div间间隔为2x.x可以自适应.如下图: 怎么做很简单,两行代码就搞定:   justi ...

  2. 浅谈 Qt 布局那些事

    Qt 布局那些事是本文介绍的内容,直接进入主题.GridLayout是一个非常强大的布局管理器,它可以实现很多复杂的布局,名字中暗示它将所有控件放置在类似网格的布局中.^__^GridLayout有两 ...

  3. 谈一谈flex布局使用中碰到的一些问题

    起因 工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的问题,以及一些有意思的特性,在此写篇博客记录一下. flex三个值的含义 众所周知,flex布局所有的属性有两种:一种作用在弹性容器(F ...

  4. 浅谈 WPF布局

    我们首先来了解一下图形化用户界面(Graphic User Interface)也就是我们常常听到的GUI.举个简单的例子,同样是数据,我们可以用控制台程序加格式控制符等输出,但是这些都不如GUI来的 ...

  5. 浅谈qt 布局器

    在一个颜值当道的今天,无论买衣服,买车还是追星,颜值的高低已经变成了大家最看重的(不管男性女性都一样,千万别和我说你不是):而对于程序猿来说,开发一款软件,不再只注重逻辑和稳定性,美观和用户友好性也是 ...

  6. 浅谈CSS布局

    在No.4中谈及了下盒子模型,引出布局模型 1.布局模型有三类: 1)流动模型  flow(默认) 2)浮动模型  float 3)层模型  layer 2.文档流 :指的是文本沿着从左到右的方向展开 ...

  7. 浅谈Android布局

    在前面的博客中,小编介绍了Android的极光推送以及如何实现登录的一个小demo,对于xml布局页面,摆控件这块的内容,小编还不是很熟练,今天小编主要简单总结一下在Android中的布局,学习过An ...

  8. 浅谈ul布局以及table布局

    我个人对于某些言论说要注重html语义化在布局中的应用,我反而不怎么感冒,试试兼容IE7&&项目期相对较赶的情况下,我还是推荐快速开发为主,兼容性强为主. 如果布局中需要用户边框,推荐 ...

  9. 浅谈静态布局、流式布局,rem布局,弹性布局、响应式布局

    静态布局: 特点:没有兼容性问题 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分:移动设备:另外建立移动网站,单独 ...

随机推荐

  1. spring Mybatis集成

    pom文件 <?xml version="1.0" encoding="UTF-8"?><project xmlns="http:/ ...

  2. DRBD 数据镜像软件

    1>DRBD介绍 1>数据镜像软件DRBD介绍  分布式块设备复制(Distributed Relicated Block Deivce,DRBD),是一种基于软件.基于网络的块复制存储解 ...

  3. config的配置文件

  4. .net Tuple特性

    .net 4.0 引入了 Tuple特性: 在C# 4.0之前我们函数有多个返回值,通常是使用ref,out .到了c# 4.0 应当使用元组Tuple而不是使用输出参数,在任何时候都应避免使用ref ...

  5. 介绍自己以及github注册流程

    我叫何季生,来自网络工程141,学号是1413042027,我喜欢看一些动漫和游戏,对于编程并不是很厉害希望今年能够有所突破. github注册流程:在刚开始注册github时,我用的是qq浏览器,却 ...

  6. vmware之VMware Remote Console (VMRC) SDK(一)

    通过console可以实现类似远程桌面的功能,但它的实现方式和远程桌面不同,一般来说远程桌面必须要有网络支持,在机器关闭或者启动过程中无法连接.而console是通过esx的虚拟化组件实现远程桌面.在 ...

  7. 如何执行oracle存储过程,就exec一下?

    不单单是exec一下,还是得分情况: 1.如果是命令窗口就用exec 存储过程名,举个栗子: EXEC procedure;--procedure是存储过程名 2.如果是PL/SQL窗口就用 begi ...

  8. js webstrom中svn的配置及使用

    js  webstorm中svn的配置及使用 一.webstorm配置svn: 1.在webstorm工具中找到file(文件)-setting(设置)菜单按钮: 2.在左边菜单中找到plus(插件) ...

  9. H5活动产品设计指南基础版

    本文来自 网易云社区 . H5一般页面不会很多,看似简单,实际上会有很多细节需要注意,我自己在做过了几个H5之后,发现了一些常犯的问题,做了小结,希望给新开始做H5的产品相关的同学提供一些帮助.  首 ...

  10. 圆角标题title

    Html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...