Flex布局

最新推荐文章于 2024-02-12 22:19:08 发布

zlingyun

最新推荐文章于 2024-02-12 22:19:08 发布

阅读量367

点赞数

分类专栏： CSS 文章标签： CSS flex

本文链接：https://blog.csdn.net/zlingyun/article/details/81984512

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先给你们推荐两篇写的特别好的文章

语法教程 http://www.runoob.com/w3cnote/flex-grammar.html 非常详尽的讲述了flex的相关用法属性说明。

实例教程 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 阮一峰老师的文章，浅显易懂。

这篇博客主要是把里面的主要属性和用途提出来做一下总结，需要详细教程的朋友请移步对应的上面的两个网站。

display:flex简介

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

也就是说当你把一个元素设置为flex，那么它将成为一个容器container，里面的元素就是它的项目item。这个关系当然指的是父子元素之间的关系。

容器属性：六个

flex-direction　　容器内项目的排列方向(默认横向排列)
flex-wrap　　容器内项目换行方式
flex-flow　　以上两个属性的简写方式
justify-content　　项目在主轴上的对齐方式
align-items　　项目在交叉轴上如何对齐
align-content　　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

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; }

属性可选值的范围为nowrap(默认)不换行、wrap换行（第一行在上方）和wrap-reverse换行（第一行在下方~）

flex-flow

.box { flex-flow: <flex-direction> || <flex-wrap>; }

写法属性中，将上述两种方法的值用||连接即可，默认值为row nowrap

justify-content

.box { justify-content: flex-start | flex-end | center | space-between | space-around; }

项目在主轴上的对齐方式(主轴究竟是哪个轴要看属性flex-direction的设置了)

flex-start（默认值）：在主轴上由左或者上开始排列

flex-end：在主轴上由右或者下开始排列

center：在主轴上居中排列

space-between：在主轴上左右两端或者上下两端开始排列

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

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（默认值）：轴线占满整个交叉轴。

项目属性：六个

order　　项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow　　项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink　　项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis　　在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex　　是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self　　允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

order

.item { order: <integer>; }

flex-grow

.item { flex-grow: <number>; /* default 0 */ }

flex-shrink

.item { flex-shrink: <number>; /* default 1 */ }

flex-basis

.item { flex-basis: <length> | auto; /* default auto */ }

flex

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

align-self

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

当然，容器属性和项目属性是结合在一起使用的。

举个栗子

1、水平垂直居中

<style>
div{
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
<div>
	<div class="inner">

	</div>
</div>

合理使用flex，利用容器属性，可以将子元素即项目配置为水平垂直居中，当然水平垂直居中不止这一种方法。

2、百分比布局

HTML代码如下

<div class="Grid">
  <div class="Grid-cell u-1of4">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell u-1of3">...</div>
</div>

CSS代码如下

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

.Grid-cell.u-full {
  flex: 0 0 100%;
}

.Grid-cell.u-1of2 {
  flex: 0 0 50%;
}

.Grid-cell.u-1of3 {
  flex: 0 0 33.3333%;
}

.Grid-cell.u-1of4 {
  flex: 0 0 25%;
}

当然这只是一个例子，我们在父元素（容器）设置了display：flex，子元素（项目）配置flex属性即可配置缩放比，已经百分比。

3、圣杯布局

圣杯布局就是最常见的网站布局，头部、躯干、尾部。躯干分为导航、主栏、副栏。

HTML代码如下

<body class="HolyGrail">
  <header>.header..</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">.main..</main>
    <nav class="HolyGrail-nav">.nav..</nav>
    <aside class="HolyGrail-ads">.aside..</aside>
  </div>
  <footer>.footer..</footer>
</body>

CSS代码如下

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 1;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
}

flex分了两层，代码很明确。

4、输入框布局

如上图的效果可以用flex实现。

HTML代码如下

<div class="InputAddOn">
  <span class="InputAddOn-item">...</span>
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">...</button>
</div>

CSS代码如下

.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
}

更多详细内容请参考推荐网站。

zlingyun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Flex布局

首先给你们推荐两篇写的特别好的文章语法教程 http://www.runoob.com/w3cnote/flex-grammar.html 非常详尽的讲述了flex的相关用法属性说明。实例教程 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 阮一峰老师的文章，浅显易懂。这篇博客主要是把里面的主要属性和用途提出来做一...
复制链接

扫一扫