使用Flexbox布局方式的简单演示

矫情吗；* 2022-03-12 09:26 219阅读 0赞

日期：2013-4-4  来源：[GBin1.com][]

众所周知，[CSS][]有多重布局模型的操作，可以使页面按照不同的布局进行展现。Flexble box是另一种布局模型，简称为Flexbox。它如今经过重写，使得在编码和使用上得到非常有效的简化。

关于Flexbox的介绍请关于文章:[ CSS的未来 - 游戏的改革者FLEXBOX][CSS_ - _FLEXBOX]。

[![Flexbox布局的简单演示][Flexbox]][Flexbox_Flexbox]

## Flexible box布局模型 ##

Flexbox中有两个轴，一个主轴和一个横轴。主轴是主要的轴，横轴是垂直于主轴的。每一个轴都有它相关联的维度和起点/终点。不论是在容器中还是容器本身都有一定的高度和宽度。

![Flexbox布局的简单演示][Flexbox 1]

## 浏览器支持 ##

目只有一部分浏览器支持Flexbox，而对于支持Flexbox的浏览器而言，也不是所有版本都可以达到最新Flexbox的语义。

浏览器对Flexbox的支持情况如下所示：

*  Opera(12.1) - 支持当前最新Flexbox，不需要任何前缀标识。
 *  Chrome(23.0) - 支持当前最新Flexbox，需要添加前缀标识:-webkit
 *  Safari(5.1) - 支持旧版本的Flexbox，需要添加前缀标识:-webkit

**.....**

via [ 极客标签][Link 1]

**来源：[使用Flexbox布局方式的简单演示][GBin1.com]**

[GBin1.com]: http://www.gbin1.com/technology/html/20130404-flexbox-layout/
[CSS]: http://www.gbin1.com/bloghome.html?tag=css
[CSS_ - _FLEXBOX]: http://www.gbtags.com/gb/share/704.htm
[Flexbox]: http://www.gbin1.com/technology/html/20130404-flexbox-layout/title.jpg
[Flexbox_Flexbox]: http://www.gbin1.com/technology/html/20130404-flexbox-layout/index.html
[Flexbox 1]: http://www.gbin1.com/technology/html/20130404-flexbox-layout/1.jpg
[Link 1]: http://www.gbtags.com/gb/share/707.htm

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关 flexbox 布局

文章目录 1、flex三栏布局 2、两边定宽，中间自适应 3、圣杯布局 1、flex三栏布局 ![在

短命女/ 2022年12月04日 01:00/ 0 赞/ 148 阅读

相关 flexbox布局_使用Flexbox创建灵活的布局

flexbox布局 The following introduction to Flexbox is an extract from Tiffany’s new book,

缺乏、安全感/ 2022年12月03日 01:40/ 0 赞/ 143 阅读

相关 flexbox布局

Flex 布局教程：语法篇作者： [阮一峰][Link 1] 日期： [2015年7月10日][2015_7_10] 网页布局（layout）是 CSS 的一个重点

浅浅的花香味﹌/ 2022年09月09日 06:07/ 0 赞/ 195 阅读

相关 iOS Flexbox 布局优化

本文来自:[https://juejin.im/post/5ab1c1aa518825555d472194][https_juejin.im_post_5ab1c1aa5188

你的名字/ 2022年05月29日 10:14/ 0 赞/ 252 阅读

相关 React-Native之（小白计划四）Flexbox简单布局

创建样式 const styles = StyleSheet.create({ container: { backgroundColor: "eae7ff

Bertha 。/ 2022年05月23日 05:55/ 0 赞/ 218 阅读

相关 HTML/CSS -- 利用flexBox布局

语法规则可参考：[RYF][] 布局1：高度固定，左宽度已知，右边适应 ![201812272218492.png][] <section>

待我称王封你为后i/ 2022年04月10日 05:55/ 0 赞/ 268 阅读

相关使用Flexbox布局方式的简单演示

日期：2013-4-4 来源：[GBin1.com][] 众所周知，[CSS][]有多重布局模型的操作，可以使页面按照不同的布局进行展现。Flexble box是另一种布局

矫情吗；*/ 2022年03月12日 09:26/ 0 赞/ 220 阅读

相关 Flexbox布局的简单演示之二

日期：2013-4-18 来源：[GBin1.com][] [![Flexbox布局的简单演示系列二][Flexbox]][Flexbox_Flexbox] 之前我们介绍

浅浅的花香味﹌/ 2022年03月06日 16:50/ 0 赞/ 225 阅读

相关 Flexbox布局，了解一下

四种布局模式块布局：呈现文档的布局模式行内布局：呈现文本的布局模式表格布局：用格子呈现2D数据的布局模式布局定位：能够直接定位元素的布局模

╰+攻爆jí腚メ/ 2021年09月15日 12:56/ 0 赞/ 347 阅读

相关常用的flexbox布局----flex属性

flex(flex items)属性这个属性定义在子元素中，是flex-grow、flex-shrink、flex-basis这三个属性的缩写。默认值为“0 1 aut

以你之姓@/ 2021年07月25日 14:27/ 0 赞/ 416 阅读