原创

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 条评论
登录 后参与评论

相关文章

  • 分享:纯 css 瀑布流 和 js 瀑布流

    通过 Multi-columns 相关的属性 column-count、column-gap 配合 break-inside 来实现瀑布流布局。

    Krry
  • 分享一次纯 css 瀑布流 和 js 瀑布流

    现在百度图片,360 图片搜索,都是以一种瀑布流的形式展示,那么接下来,分享一波纯 css 瀑布流 和 js 瀑布流

    Krry
  • java 开发 websocket 网页端聊天室

    WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

    Krry
  • HTML规范 - 整体结构

    申霖
  • vue从创建到完整的饿了么(5)v-for,v-bind与计算属性

    1.上一章--Home.vue及vue-resource使用 2.cangdu大神的项目源码地址--Github地址 3.接口地址--Github地址 4.UI...

    前端博客 : alili.tech
  • Angular 4.0 内置指令全攻略

    在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示。尽量用最少最简单的描述,让你在更快更准确地学会每一种内置指令的基本用法。

    前端博客 : alili.tech
  • 你听过 React Fragments吗??

    React 中常见模式是为一个组件返回多个元素。为了包裹多个元素你肯定写过很多的 div 和 span,进行不必要的嵌套,无形中增加了浏览器的渲染压力。

    前端博客 : alili.tech
  • Python爬虫获取豆瓣电影并写入excel

    这篇文章主要介绍了Python爬虫获取豆瓣电影并写入excel ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考...

    python学习教程
  • 块级格式化上下文

    BFC块级格式化上下文Block Formatting Context,是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元...

    WindrunnerMax
  • FLEX布局

    FLEX布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持。

    WindrunnerMax

扫码关注云+社区

领取腾讯云代金券