Flexbox

Flexbox

Flex的使用方法,Flex的基本概念及属性有哪些

2018-09-14侠课岛    初级拔高       

前端/前端/响应式网站基础入门 28     0     4059

弹性盒子(Flexbox)是一种新技术,但在如今各个浏览器都广泛支持的情况下,它已经开始准备广泛应用了。 弹性盒子提供了工具,允许快速创建曾经被证明用CSS很难实现的一些复杂,灵活的布局和功能。 本文将解释所有的基本原理。

长久以来,唯一可用的且有稳定的跨浏览器兼容性的能用来构建 CSS 布局的工具只有 floatposition。它们是既可行,表现也不错的布局方案,但是在某些布局方面它们就有限制,并且难以实现。

以下简单的布局要求是难以或不可能用这样的工具方便且灵活的实现的:

  1. 在父内容里面垂直居中一个块内容。
  2. 使容器的所有子项占用等量的可用宽度/高度,而不管有多少宽度/高度可用。
  3. 使多列布局中的所有列采用相同的高度,即使它们包含的内容量不同。

面对此种布局场景,Flex布局方式应运而生,Flexbox布局模块旨在提供一个更佳有效的布局方式,更好的控制项目的对齐和自由分配容器空间,即使它们的大小是未知的或动态的。因此得其名"flex"。

Flex的使用

我们先来简单的体验一下flex的使用,我们用它来做一个三栏布局:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FlexBox</title>
</head>
<body>
  <header>
  <h1>李商隐</h1>
</header>
<section>
  <article>
    <h2>锦瑟</h2>
    <p>锦瑟无端五十弦,</p>
    <p>一弦一柱思华年。</p>
    <p>庄生晓梦迷蝴蝶,</p>
    <p>望帝春心托杜鹃。</p>
    <p>沧海月明珠有泪,</p>
    <p>蓝田日暖玉生烟。</p>
    <p>此情可待成追忆,</p>
    <p>只是当时已惘然。</p>
  </article>
  <article>
    <h2>夜雨寄北</h2>
    <p>君问归期未有期,</p>
    <p>巴山夜雨涨秋池。</p>
    <p>何当共剪西窗烛,</p>
    <p>却话巴山夜雨时。</p>
  </article>
  <article>
    <h2>别薛喦宾</h2>
    <p>曙爽行将拂,晨清坐欲凌。</p>
    <p>别离真不那,风物正相仍。</p>
    <p>漫水任谁照,衰花浅自矜。</p>
    <p>还将两袖泪,同向一窗灯。</p>
    <p>桂树乖真隐,芸香是小惩。</p>
    <p>清规无以况,且用玉壶冰。</p>
  </article>
</section>
</body>
</html>
body {
  text-align: center;
  background: #f8f8f8;
}

section {
  display: flex;  /* article 等高 */
}

section > article {
  flex: 1;  /* article 等宽 */
  margin: 10px;
  background: #fff;
  padding: 0 10px 15px;
  border-radius: 4px;
  border: 1px solid #ddd;
  box-shadow: 1px 1px 3px #ddd;
}

诗词页面

诗词页面代码

熟悉以往三栏布局方式(圣杯、双飞翼)的同学应该可以很清晰的感觉到flex的方便之处,它可以让我们更加简便的进行布局,flex的出现让我们的页面开发更加轻便。

Flex的基本概念及属性

Flex的基本概念

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

flex容器 这张图可以更清晰的让我们理解flex容器

Flex的基本属性

flex-direction

flex-direction属性决定主轴的方向(即项目的排列方向),它有四种值:

名称 作用
row 主轴为水平方向,起点在左端
row-reverse 主轴为水平防线,起点在右端
column 主轴为垂直方向,起点在上方
column-reverse 主轴为垂直方向,起点在下方

下面我们通过代码来感受一下flex-direction属性,我们在容器内创建三个div,看一下其方向:

row

flex-direction-row

row-reverse

flex-direction-row-reverse

column

flex-direction-column

column-reverse

flex-direction-column-reverse

flex-wrap

默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

名称 作用
nowrap 不换行
wrap 换行,顺序
wrap-reverse 换行,逆序

下面我们通过代码来感受一下flex-wrap属性,我们在容器内创建若干个div,看一下其排列:

nowrap

nowrap

wrap

wrap

wrap-reverse

wrap-reverse

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

justify-content

justify-content属性定义了项目在主轴上的对齐方式。它有五种类型的值:

名称 作用
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐,项目之间的间隔都相等
space-around 每个项目两侧的间隔相等

flex-start

justify-content-flex-start

flex-end

justify-content-flex-end

center

justify-content-center

space-between

justify-content-space-between

space-around

justify-content-space-around

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

28

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?