flex 布局

博客地址:https://ainyi.com/53

CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。 flex 是 flexible box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性

基本概念

采用 flex 布局的元素称为 ==flex 容器==,容器的直接子元素称为 ==flex 项目==,容器默认有两个轴心线,用于项目的对齐与排列,水平主轴为 main axis,垂直主轴为 cross axis,主轴的开始位置为 start, 结束位置为 end

主轴和交叉轴的判定:如果 flex-direction 为 row,则主轴是水平方向,如果是 column,则主轴是垂直方向

flex 属性

将任意元素的 display 属性设置为 flex,可将其转换为Flex容器 设为 flex 容器后,子元素的 float、clear 和 vertical-align 属性将失效

flex 容器属性

属性名描述

属性名

参数

主轴方向

flex-direction

row(水平排列,默认);row-reverse(水平反向排列);column(垂直排列);column-reverse(垂直反向排列)

换行

flex-wrap

nowrap(不换行,默认);wrap(换行);wrap-reverse(反向换行,第一行在最后面)

上面两个属性的简写

flex-flow

row nowrap(默认值)

主轴对齐方式

justify-content

flex-start(起点对齐,默认);flex-end(终点对齐);center(居中对齐);space-between(两端对齐);space-around(分散对齐)

交叉轴对齐方式

align-items

stretch(拉伸对齐,默认);flex-start(起点对齐);flex-end(终点对齐);center(居中对齐);baseline(第一行文字的基线对齐)

多根轴线对齐方式

align-content

stretch(拉伸对齐,默认);flex-start(起点对齐);flex-end(终点对齐);center(居中对齐);space-between(两端对齐);space-around(分散对齐)

flex 项目属性

属性名描述

属性名

参数

顺序

order

number 类型(数值越小越靠前,默认为 0)

放大比例

flex-grow

number 类型(默认为 0,如果有剩余空间也不放大,若值为 1 则放大,2 是 1 的双倍大小,以此类推)

缩小比例

flex-shrink

number 类型(默认为 1,如果空间不足则会缩小,值为0不缩小)

项目自身大小

flex-basis

auto(默认auto,为原来的大小);length(设置固定值 50px/50%)

上面三个属性的简写

flex

0 1 auto(默认值);两个快捷值 auto (1 1 auto) 和 none (0 0 auto)

项目自身对齐

align-self

auto(继承父元素,默认);flex-start(起点对齐);flex-end(终点对齐);center(居中对齐);baseline(基线对齐);stretch(拉伸对齐)

flex.css 的使用

在移动端开发中,并不是所有的浏览器、webview、微信等各种版本都支持标准的 flex,但是基本上都会支持-webkit-box,所以 flex.css 的主要作用是保证每一个属性都能支持标准 flex 或旧版本的 -webkit-box。

由于 flex.css 采用了 autoprefixer 编译,所以能够保证在浏览器不支持标准 flex 布局的情况下,回滚到旧版本的-webkit-box,保证移动设备中能呈现出一样的布局效果

于是,一款移动端快速布局的神器诞生了

flex 容器配置项

标签属性使用方式:data-flex="xxx xxx xxx"

配置项

排列形式: row | column
间距: gutter
内容水平垂直居中: center
可换行: wrap
主轴对齐方式: main-start | main-center | main-end | main-between | main-around
交叉轴对齐方式: cross-start | cross-center | cross-end | cross-baseline | cross-stretch
多轴对齐方式: start | end | center | between | around | stretch
响应式: full

flex 项目的配置项

标签属性使用方式:data-cell="xxx xxx xxx"

配置项

元素自身对齐方式: start | end | center | baseline | stretch
固定宽度: 1/2 | 1/3 | 1/4 | 1/5 | 1/6
排序: order[1-10]

基础栅格系统

每项宽度相同,自然平分,高度默认都相同

<div data-flex="gutter">
  <div data-cell><div class="item">auto</div></div>
  <div data-cell><div class="item">auto</div></div>
  <div data-cell><div class="item">auto</div></div>
  <div data-cell><div class="item">auto</div></div>
  <div data-cell><div class="item">auto</div></div>
</div>

相对的固定宽度与自适应宽度

<div data-flex="gutter row">
  <div data-cell="1/2"><div class="item">1/2</div></div>
  <div data-cell><div class="item">auto</div></div>
  <div data-cell><div class="item">auto</div></div>
</div>

响应式

响应式栅格系统通过添加媒体查询到栅格元素或栅格容器来实现

当满足媒体查询的条件时,栅格系统就能自动调整

<div data-flex="full gutter">
  <div data-cell><div class="item">full/auto</div></div>
  <div data-cell><div class="item">full/auto</div></div>
  <div data-cell><div class="item">full/auto</div></div>
</div>

项目对齐

置顶对齐

项目默认是置顶对齐的,手动添加可以使用 cross-start

<div data-flex="gutter">
  <div data-cell> <div class="item">置顶对齐</div></div>
  <div data-cell> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
  <div data-cell> <div class="item">置顶对齐</div></div>
</div>

置底对齐

<div data-flex="gutter cross-end">
  <div data-cell> <div class="item">置底对齐</div></div>
  <div data-cell> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
  <div data-cell> <div class="item">置底对齐</div></div>
</div>

垂直居中对齐

<div data-flex="gutter cross-center">
  <div data-cell> <div class="item">居中对齐</div></div>
  <div data-cell> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
  <div data-cell> <div class="item">居中对齐</div></div>
</div>

混合对齐

为个别项目自身设置独立的对齐方式

<div data-flex="gutter">
  <div data-cell="start"> <div class="item">居顶对齐</div></div>
  <div data-cell="start"> <div class="item">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem.</div></div>
  <div data-cell="center"> <div class="item">居中对齐</div></div>
  <div data-cell="end"> <div class="item">居底对齐</div></div>
</div>

主轴起点对齐

<div data-flex="gutter main-start">
  <div data-cell="1/5"> <div class="item">居左对齐</div></div>
</div>
<div data-flex="gutter main-center">
  <div data-cell="1/5"> <div class="item">居中对齐</div></div>
</div>
<div data-flex="gutter main-end">
  <div data-cell="1/5"> <div class="item">居右对齐</div></div>
</div>

主轴两端对齐

<h5>两端对齐</h5>
<div data-flex="gutter main-between">
  <div data-cell="1/5"> <div class="item">两端对齐</div></div>
  <div data-cell="1/5"> <div class="item">两端对齐</div></div>
  <div data-cell="1/5"> <div class="item">两端对齐</div></div>
</div>

主轴分散对齐

<h5>分散对齐</h5>
<div data-flex="gutter main-around">
  <div data-cell="1/5"> <div class="item">分散对齐</div></div>
  <div data-cell="1/5"> <div class="item">分散对齐</div></div>
  <div data-cell="1/5"> <div class="item">分散对齐</div></div>
</div>
```html
### 无限嵌套

栅格可以无限嵌套在另一个栅格中

<div data-flex="gutter">

<div data-cell>

<div class="item">
  <div data-flex="gutter">
    <div data-cell><div class="item">1</div></div>
    <div data-cell>
      <div class="item">
        <div data-flex="gutter">
          <div data-cell><div class="item">2</div></div>
          <div data-cell><div class="item">2</div></div>
        </div>
      </div>
    </div>
  </div>
</div>

</div>

<div data-cell="1/4"><div class="item">1/4</div></div>

</div>

### 自定义顺序

<div data-flex="gutter">

<div data-cell="order5"><div class="item">1</div></div>

<div data-cell="order3"><div class="item">2</div></div>

<div data-cell="order2"><div class="item">3</div></div>

<div data-cell="order1"><div class="item">4</div></div>

<div data-cell="order4"><div class="item">5</div></div>

</div>

## 兼容性

flex在演化过程有三个版本,旧版本 display:box | inline-box, 混合版本 display:flexbox | inline-flexbox, 新版本 display: flex | inline-flex

.box{

display: -webkit-box; / 老版本语法: Safari, iOS, Android browser, older WebKit browsers. /

display: -moz-box; / 老版本语法: Firefox (buggy) /

display: -ms-flexbox; / 混合版本语法: IE 10 /

display: -webkit-flex; / 新版本语法: Chrome 21+ /

display: flex; / 新版本语法: Opera 12.1, Firefox 22+ /

}

旧版相对于新版的主要区别:flex项目必须是block,没有换行设置,没有反向设置,主轴没有space-around,顺序值从1开始

参考文章:Flex布局应用

博客地址:https://ainyi.com/53

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏做全栈攻城狮

.Net程序员快速学习安卓开发-布局和点击事件的写法

我们新建一个layout布局文件时,默认就是相对布局。相对布局是相对于非相对布局来说的。顾名思义,相对布局就是 相对于某些控件位置的布局。所有的控件都是相对位置...

14440
来自专栏大数据钻研

认识html元素

前端现在越来越火,可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础,但是想转到前端的人”一点帮助。 认识一个html文档的基...

30440
来自专栏一“技”之长

Tkinter之Menu组件用法 原

    开发工具类桌面应用使用Python、Java这类语言是一种不错的选择,他们的GUI库都可以很好的支持跨平台特性。本系列博客主要总结Tkinter库中提供...

12020
来自专栏娱乐心理测试

小程序上传多张图片

以前写过小程序网络和本地图片到相册的方法:https://www.jianshu.com/p/5479041607fa,写过上传一张或多张图片到阿里云OSSht...

2.1K50
来自专栏angularejs学习篇

瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用。

50620
来自专栏三木的博客

HTML概要

HTML CSS Javascript 的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。 CSS...

36490
来自专栏青青天空树

认识基本的mfc控件

  几乎可以在每个windows程序中都看到按钮、复选框、文本框以及下拉列表等等,这些都是控件。而且很多常用的控件已经内置到操作系统当中了,在Visual C+...

12620
来自专栏实战docker

dubbo服务提供者在tomcat启动失败的问题

dubbo的服务提供者是个web服务,打成war包后在tomcat启动失败,查看tomcat的logs目录下的localhost.2017-05-15.log文...

1.2K100
来自专栏性能与架构

微信小程序示例 - 交互组件

消息提示框 toast ? 代码结构 <toast bindchange="..."> 消息内容 </toast> 属性 duration - 消息显示...

45480
来自专栏一“技”之长

Bootstrap响应式前端框架笔记四——表单

    在Bootstrap框架中,可以为表单标签添加form-control属性来为其设置默认样式,默认表单控件的宽度将充满父容器标签。需要注意,在布局表单时...

15210

扫码关注云+社区

领取腾讯云代金券