flexbox 布局


title: flex布局
date: 2017-07-07 14:13:33
tags: css笔记


flexbox是什么

即使不知道视窗大小或者未知元素情况之下都可以智能的、灵活的调整和分配元素和空间两者之间的关系。简单的理解,就是可以自动调整,计算元素在容器空间中的大小。

使用flexbox

要开始使用flexbox,必须先让父元素变成一个flex容器,而此时子元素就变成了flex项目。

可以在父元素中设置display:flex或者display:inline-flex。这样一个flexbox格式上下文就启动了。

html结构

<ul> <!--parent element-->
  <li></li> <!--first child element-->
  <li></li> <!--second child element-->
  <li></li> <!--third child element-->
</ul>

css样式

ul {
    display: flex;
    border: 1px solid pink;
}
li {
    list-style: none;
    width: 100px;
    height: 100px;
    background-color: #8cacea;
    margin: 8px;
}
image

flex容器属性

flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

当父元素设置为一个flex容器后,这几个属性可以直接使用在flex容器上。

flex-direction

flex-direction属性控制flex项目沿着主轴(Main Axis)的排列方向。

这个属性具有四个值,分别是水平、垂直、水平反向、垂直反向

row(默认) || column || row-reverse || column-reverse

简单来说就是flex-direction属性让你决定flex项目如何排列,其实水平和垂直在flex中不是方向概念,它们常常被称为主轴(Main-Axis)和侧轴(Cross-Axis)

image

如果把flex-direction属性改为column,这时flex项目将沿着Cross-Axis从上到下垂直排列。

html结构

<ul> <!--parent element-->
  <li></li> <!--first child element-->
  <li></li> <!--second child element-->
  <li></li> <!--third child element-->
</ul>

css样式

ul {
    display: flex;
    flex-direction: column;
    border: 1px solid pink;
}

li {
    list-style: none;
    width: 100px;
    height: 100px;
    background-color: #8cacea;
    margin: 8px;
}
image

flex-direction改变方向后,实际上是改变的Main-Axis和Cross-Axis两个轴的方向,如果设置flex-direction: column;,那么实际上就是Main-Axis和Cross-Axis调换了位置。这将会影响之后基于Main-Axis和Cross-Axis的所有flex属性的设置。

flex-wrap

flex-wrap属性有三个属性值,分别是换行、不换行、反向换行

wrap || nowrap(默认) || wrap-reverse

flex的默认行为会在一行内容纳所有的flex项目,即使浏览器出现滚动条(当flex项目的总体宽度大于浏览器窗口宽度)。默认是不换行的。

当flex项目过多时,也不会换行,所以每个项目会被压缩。而且如果flex项目元素内有类似文字等内容会撑开flex项目,那么浏览器就会出现滚动条。

image

如果希望flex容器在其flex项目达到一定数量能换行,将flex-wrap设置为wrap即可。当一行再不能包含所有列表项的默认宽度,就会多行排列。

image

除此之外,还有一个值wrap-reverse。它让flex项目在容器中多行排列,只是方向是相反的。

image

flex-flow

flex-flowflex-directionflex-wrap两个属性的连写属性。

就好比border: 1px solid red的概念

flex-flow: row wrap相当于flex-direction: row; flex-wrap: wrap;的写法。

justify-content

justify-content属性主要定义了flex项目在Main-Axis上的对齐方式,有五个值可选:

flex-start(默认) || flex-end || center || space-between || space-around

justify-content: flex-start;是让所有flex项目靠Main-Axis开始边缘(左对齐),也就是默认。

image

justify-content: flex-end;是让所有flex项目靠Main-Axis结束边缘(右对齐)。

image

justify-content: center;让所有flex项目排在Main-Axis的中间(居中)

image

justify-content: space-between; 让除了第一个和最后一个flex项目的两者间间距相同(两端对齐)

image

justify-content: space-around;让每个flex项目具有相同的空间,相当于是给每个flex项目相同的margin-leftmargin-right

image

align-items

align-items属性类似于justify-content属性,主要是控制flex项目在Cross-Axis对齐方式,有五个可选值:

flex-start || flex-end || center || stretch(默认) || baseline

align-items: stretch;在没有设置flex高度的情况下,让所有的flex项目高度和flex容器高度一样。

image

align-items: flex-start;让所有flex项目靠Cross-Axis开始边缘(顶部对齐)

image

align-items: flex-end;让所有flex项目靠Cross-Axis结束边缘(底部对齐)

image

align-items: center;让flex项目在Cross-Axis中间(居中对齐)

image

align-items: baseline;让所有flex项目在Cross-Axis上沿着他们自己的基线对齐

image

align-content

align-content必须用于多行的flex容器,也是用来控制flex项目在flex容器里的排列方式,效果和align-items相似,可选五个值:

flex-start || flex-end || center || stretch(默认)

align-content: stretch;会拉伸flex项目,让他们沿着Cross-Axis适用flex容器可用的空间。

image

align-content: flex-start;让多行flex项目靠Cross-Axis开始边缘。

image

align-content: flex-end;让多行flex项目靠Cross-Axis结束位置

image

align-content: center;让多行flex项目在Cross-Axis中间

image

flex项目属性

order || flex-grow || flex-shrink || flex-basis

order

允许flex项目在一个flex容器中重新排序,基本上可以改变flex项目的顺序从一个位置移到另一个地方。

这也意味着flex项目的位置改变在html中不需要改变源代码。

order的默认值是0,也可以接收一个正值或一个负值。数值越大的flex项目排序越往后,如果两个以上flex项目有相同的order值,flex项目重新排序是基于html源文件的位置进行排序

<ul>
    <li style="font-size:24px;">列表项1</li>
    <li style="font-size:24px;">列表项2</li>
    <li style="font-size:24px;">列表项3</li>
    <li style="font-size:24px;">列表项4</li>
    <li style="font-size:24px;">列表项5</li>
</ul>
li:nth-child(1) {
    order: 2;
}
li:nth-child(2) {
    order: 1;
}
li:nth-child(3) {
    order: 3;
}
li:nth-child(4) {
    order: 3;
}
image

flex-grow和flex-shrink

flex-grow属性控制flex项目在容器有多余的控件如何放大。默认值0。

flex-shrink属性控制flex项目在容器没有额外空间又如何缩小。默认值1。

取值范围是0或者大于0的任何正数值,这个数值是设置flex项目在容器中所占比。

首先来看flex-grow: 0;的效果

image

flex容器有多余的空间,这时将flex-grow: 1;即可让flex忽略自己本身的宽度,平均分配flex内部的空间,通过这个数值也可以改变每个flex项目所占空间的占比。

image

flex-shrink属性和flex-grow属性是相反的,现在设置flex-shrink: 0;看一下。

image

如果像是这样flex项目的宽度多出了flex容器,那么就需要将flex-shrink: 1;,这样会压缩flex项目的宽度,让其平均分配flex容器的空间,数值也是flex的占比。

image

flex-basis

flex-basis属性可以指定flex项目的初始大小,也就是在flex-growflex-shrink调整之前的大小。

flex-basis默认值是auto,可以取任何用于width属性的值,比如% || em || rem || px等等。但是如果要设置为0的话也要带有单位,flex-basis: 0;这种写法是错误的。

flex-basis: auto; 这是默认情况flex项目的宽度。

image

可以看出flex项目的宽度就是由内容撑开,而使用flex-basis: 150px;这样flex的宽度就被设置为了固定的150px;

image

flex连写

flexflex-growflex-shrinkflex-basis三个属性的连写。

flex: 0 1 auto;相当于flex-grow: 0; flex-shrink: 1; flex-basis: auto;

align-self

align-self可以改变一个弹性项目沿着侧轴的位置,而不影响相邻的弹性项目。该属性的可选值为:

auto(默认) || flex-start || flex-end || center || baseline || stretch。

align-self: flex-end;align-self: center;align-self: flex-start;三个值的效果。

image

align-self: stretch;会将目标flex项目拉伸,以沿着Cross-Axis填满flex容器的可用空间。

image

align-self:baseline;将目标flex项目沿着基线对齐,在这里效果和flex-start效果相同。

image

最后一个是align-self: auto;是将目标flex项目的值设置为父元素的align-items的值,或者如果该元素没有父元素的话,就设置为stretch

相对和绝对flex项目

相对和绝对flex项目主要区别在于间距和如何计算间距,相对flex项目内的间距是根据它的内容大小来计算的,而在觉得flex项目中,只根据flex属性来计算。

先来看相对flex,flex项目设置flex: auto,这个设置和flex: 1 1 auto;是相同的,这样flex项目就是基于其包含内容的大小而计算的。下面的图中每个flex项目的内容不同,其占的宽度也不相同。

image

下面来设置成绝对的flex项目,flex: 1;这个设置和flex: 1 1 0;效果是一样的。flex-basis: 0;的情况下,flex项目会基于flex-grow来计算自己的空间,而flex-grow: 1;,所以每个flex所占空间相同。

image

从上面可以得出结论,绝对flex项目的宽度只基于flex属性,相对flex的宽度基于内容的大小。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容

  • 前言 FlexBox是css3的一种新的布局方式,天生为解决布局问题而存在的它,比起传统的布局方式,我们使用Fle...
    zevei阅读 1,410评论 23 3
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,395评论 0 26
  • flex布局有主轴和侧轴两个轴(main axis和cross axis),这两个轴是可以互换的。 默认情况下,主...
    编程知识圈阅读 756评论 0 1
  • 1.flexbox布局 1.1flexbox flexbox布局可以简单快速的实现各种伸缩性的设计。那么flexb...
    lihhm阅读 3,748评论 0 1
  • http://caniuse.com/#feat=flexboxhttp://compass-style.org/...
    ilaoke阅读 1,454评论 1 4