flex 常见属相 及 实现垂直水平居中

wangjie 2020-01-12

flex 布局父项常见属性:

flex-direction: // 设置主轴的方向
row -- 默认值从左到右
row-reverse -- 从右到左
column -- 从上到下
column-reverse -- 从下到上

justify-content: // 设置主轴上的子元素排列方式
flex-start -- 默认值从头部开始 如果主轴是x轴，则从左到右
flex-end -- 从尾部开始排列
center -- 在主轴居中对齐(如果主轴是x轴则 水平居中)
space-around -- 平分剩余空间
space-between -- 先两边贴边 再平分剩余空间(重要)

flex-wrap: // 设置子元素是否换行
nowrap -- 默认值，不换行，如果装不下，会缩小子元素的宽度，放到父元素里面
wrap -- 换行

align-items: // 设置侧轴上的子元素排列方式(单行)
flex-start -- 默认值 从上到下
flex-end -- 从下到上
center -- 挤在一起居中(垂直居中)
stretch -- 拉伸，此时子元素不要给高度

align-content: // 设置侧轴上的子元素的排列方式(多行)，只能用于子元素换行的情况
flex-start -- 默认值在侧轴的头部开始排列
flex-end -- 在侧轴的尾部开始排列
center -- 在侧轴中间显示
space-around -- 子项在侧轴平分剩余空间
space-between -- 子项在侧轴先分布在两头，再平分剩余空间
stretch -- 设置子项元素高度平分父元素高度

flex-flow: // 复合属性，相当于同时设置了flex-direction和flex-wrap
例如: flex-flow: row wrap;

flex 布局子项常见属性:

flex: // 子项目占的份数
<number> -- 默认值0

align-self: // 控制子项自己在侧轴的排列方式(允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性)
auto -- 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

order: // 定义子项的排列顺序(前后顺序),数值越小，排列越靠前，默认为0

实现垂直水平居中:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
	div {
	  height: 500px;
	  width: 500px;
	  border: 1px solid #eee;
	  display: flex;
	  /*主轴居中*/
	  justify-content: center;
	  /*侧轴居中*/
	  align-items: center;
	}
	div span {
	  width: 100px;
	  height: 100px;
	  background-color: #ff0000;
	}
  </style>
</head>
<body>
  <div>
	<span></span>
  </div>
</body>
</html>

.

wangjie

wangjie

相关推荐

css3中的flex布局引用详解

flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。我们可以把任何容器转换成称为弹性容器，它的所有子元素就变为称为弹性项目成员。我们可以通过给任何容器元素添加 display: flex;

zhanghaibing00 / 0评论 2020-05-31

flex 常用布局自我记录

justify-content:space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。左右靠边中间居中。还可以是none关键字，取值为none则不伸缩。单独设置子容器如何沿交叉轴排列：align-self,此

yuanye0 / 0评论 2020-05-20

2020年5月css布局flex 多行四列 多行多列

<!DOCTYPE html>. <meta name="viewport" content="width=device-width, initial-scale=1.0">. *{margi

葉無聞 / 0评论 2020-05-11

CSS 弹性布局

使用弹性布局，首先要将父盒子定义为弹性盒子。弹性盒子内的元素称为”弹性元素“。弹性布局实际上就是要对弹性元素的排列做各种设置。如果不添加溢出换行，默认溢出是元素自动调整宽高以适应。同时设置flex-direction和flex-wrap。如果flex-di

myloveqiqi / 0评论 2020-05-02

父容器flex布局，子控件absult布局，会影响父容器的宽度

display: flex;flex-direction: column;width: 80%;/* flex-grow:0;margin-right: 80rpx;background-color: brown;width: 100%;height: 2

容数据服务集结号 / 0评论 2020-03-01

css基础面试题

页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-it

wangjie / 0评论 2020-02-12

web前端入门到实战：CSS flex布局入门

都知道html正常的文档流是自上而下排列的，块级元素会像下左图一样排列。但是项目中尤其是移动端项目会有很多需求的排版方式是要求由左到右排列。虽然可以通过dispaly：inline-block、float、position完成排版，但是需要对距离进行计算，

wwwxuewen / 0评论 2020-01-20

CSS3(5)---伸缩布局(Flex)

上面三种布局都是基于盒状模型。依赖 display属性 + position属性 + float属性。它对于有些特殊布局并不友好，比如，垂直居中就不容易实现，会有溢出容器的问题。Flex是意思是”弹性布局”，它可以为盒状模型提供最大的灵活性。主要思想是让容

e度空间 / 0评论 2020-01-12

css3 弹性盒布局的使用-Flex

css3 的Flex弹性盒的布局是一个用于页面布局的全新CSS3模块功能。它可以把列表放在同一个方向，并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩容器（flex. container）来辅助实现。它的目的是使用常见的布局模式，比

akcsdno / 0评论 2019-12-26

[CSS七分钟系列]都1902年了,还不知道用margin:auto给flex容器内元素分组?

最近看到几篇博文讲解margin:auto在flex容器中的使用,可惜的是大多讲解都浮于页面表现,没深究其中的作用机理,本文在此浅薄对其表现机理做简单探讨.日常业务迭代过程中,flex已经是前端工程师解决常见布局的神兵利器.但是随着使用的深入,偶然会发觉f

MaureenChen / 0评论 2019-12-01

Flex入门的好书——《Flex3 Cookbook 中文版》

7.13节. 改变List中的渲染器大小第八章. 图像，位图，视频和声音 8.1节. 载入并显示图像8.2节. 创建视频显示8.3节. Mp3文件的播放和暂停8.4节. 为音频文件创建进度搜索条8.5节. 融合两幅图像8.6节. 将Convolution滤

随智阔 / 0评论 2014-01-13

web前端入门到实战：html/css弹性布局的几大常用属性详解

nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度；flex-end：项目位于主轴终点。row-起点在左边，row-reverse-起点在右边， column-起点在上边，column-reverse-起点在下边；如果项目只有一根轴线，该

jiedinghui / 0评论 2019-11-10

web前端入门到实战：html/css弹性布局的几大常用属性详解

nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度；flex-end：项目位于主轴终点。row-起点在左边，row-reverse-起点在右边， column-起点在上边，column-reverse-起点在下边；如果项目只有一根轴线，该

somboy / 0评论 2019-11-10

css，对包含有子元素的元素进行flex后，会影响原有的布局。如何后续处理

对包含有子元素的元素进行flex后，会影响原有的布局。例如设置两个div，第一个div包含一个img（图片），第二个div包含多个p元素。虽然两个div会同时处在一行内。需对第二个div作如下处理。则会重新改变第二个div的主轴方向。从而得到我们想要的结果

waterv / 0评论 2019-11-09

css flex弹性布局学习总结

　　flex,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。　　主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持：。　　它的所有子元素自动成为容器成员，称为Flex项目，简称”项目”。　　主轴开始的位置，即主轴与右边框的

wangjie / 0评论 2019-11-04

CSS · Flex &amp; Grid 布局 · 自检手册

本文只列出flex及grid布局的一些基本概念及新增属性，用于自检对相关知识的掌握程度。具体教程及实例还请参考文末的引用文献。flex: 0 1 auto ≠ flex: 0 1不过常见有写：flex: 1意思是：若存在剩余空间时，该item填充满；但若是

ThikHome / 0评论 2019-09-24

2019js基础面试题整理复习

它不是html标签，它为浏览器提供一种信息声明，告诉浏览器html是用什么版本编写的，用来表示html的版本。有html、html+、html2.0、html、3.2、html4.01、xhtml 1.0、html5等。设置display：flex的时候，

红壶吃猬队 / 0评论 2019-09-08

浅谈flex布局

之前用过flex，不过没有深入了解过。今天想起来了，那么来总结一下吧。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。一个使用Flexbox布局的父容器会伸展每个子元素来填充可用的空间，或者压缩它们来阻止超出父容器。

mokingone / 0评论 2018-03-09

前端比较好用的一个Flex布局样式包

前端比较好用的一个Flex布局样式包

bluemengcom / 0评论 2018-07-16

CSS 搞事技巧：checkbox+label+selector

介绍其实这篇文章写到一大半时它的名字还叫做 《重温 Flex 布局》，结果写着写着就走了心，附上一图表示心情吧：。这三个元素作为这个 《CSS 搞事技巧》的第一篇并非仅仅是在接下来的 《重温 Flex 布局》中要使用，而是因为这个技巧的确是很基础。示例示例

ThikHome / 0评论 2019-07-01

CSS3 - 伸缩盒模型 Flexible Box Layout

Flexible意为可伸缩的，Box意为盒子，可以理解为一种新式的盒模型---伸缩盒模型。由CSS3规范提出，这是在原有的大家非常熟悉的 block,inline-block,inline 的基础上延伸出的新一代布局模式。对于块级元素来说，布局的延伸方向是

gigipop / 0评论 2019-07-01

JavaScript五十问——对比来说CSS的Grid与FlexBox（上篇）

前言春节假期有幸拜读了张鑫旭大大的关于Flex与Grid的两篇文章，很有收获；自己在开发的过程中，很多时候都会采用Flex布局，而Float与inline-box这种方式已经很少使用了；这次在春假期间学习了Grid，深感Grid的好用与便利。趁着这次机会总

dazhifu / 0评论 2019-07-01

CSS实例详解：Flex布局

本文由云+社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。一．垂直居中这里同时用非flex布局和flex布局两种方式来实现，可以对比两种实现方式的差异。父元素采用相对定位，子元素采用绝对定位，先

淡风wisdon大大 / 0评论 2019-06-29

关于CSS3 flex布局，这样简单做就好了。

flex布局在移动端会用得比较广泛，例如导航栏，菜单栏等，以支付宝，淘宝APP为例。看了网上很多关于flex布局，有些写得太乱了，也太复杂了。写一个导航栏，5个导航，用普通得写法是。就没每个<li></li>按照20%平均分，左浮动

dangzhangjing / 0评论 2019-06-29

详解CSS的Flex布局

本文由云+社区发表Flex是Flexible Box 的缩写，意为"弹性布局"，是CSS3的一种布局模式。通过Flex布局，可以很优雅地解决很多CSS布局的问题。下面会分别介绍容器的6个属性和项目的6个属性。每个属性会附上效果图，具体实

Phoebe的学习天地 / 0评论 2019-06-29

使用inline-flex让容器自适应宽度

想必flex大家都不陌生，但是你知道还有一种布局叫inline-flex吗？inline-flex和flex的区别很简单，除了inline-flex可以让容器根据子元素内容的宽高自适应容器的宽度外，其他和flex几乎一模一样。flex默认使容器占据一整行宽

lyelyelye / 0评论 2019-06-29

CSS 7：网页布局（传统布局，flex布局，布局套路）

width: 1000px; //或 max-width: 1000px;margin-left: auto;margin-right: auto;演示地址范例。注意 max-width和width的区别：使用固定width的时候，如果浏览器缩小到比设置的

yibawuqing / 0评论 2019-06-28

Css3中display:flex与display:box区别

答案：没区别,是不同阶段w3c草案命名的不同，W3C 2009年第1次草案：display:box;W3C 2011年第2次草案：display:flexbox | inline-flexbox;-W3C 2012年第5次草案及以后的候选推荐标准：disp

怀抱清风 / 0评论 2018-08-06

前端比较好用的一个Flex布局样式包

前端比较好用的一个Flex布局样式包

Pinkr / 0评论 2018-07-16

css:flex布局

Flex布局教程：语法篇

wcssdu / 0评论 2017-03-13

CSS flex 布局属性详解

任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。它的所有子元素自动成为容器成员，称为Flex项目，简称”项目”。主轴的开始位置叫做mainstart，结束位置叫做ma

libowen0 / 0评论 2019-06-28

CSS3.0 FLEX布局（兼容微信浏览器）

flex-direction: column;/* android 4.4 *//* 子元素自动占据剩余的空间 */. justify-content: center;/* android 4.4 *//* 水平布局下的子元素 垂直居中 */

HealerJJJ / 0评论 2015-12-21

CSS3 中FLEX快速实现BorderLayout布局

学习完flex的布局模式之后,我们趁热打铁,来实现一个BoxLayout布局.什么是BoxLayout布局?那我们先上一个图看看。BoxLayout布局写过后端UI代码的编程者应该不陌生了,写前端的代码的也同样很熟悉,包括html的框架frame.但以往的

CoderChang / 0评论 2015-12-04

CSS3中更灵活的布局方式

flex是一个灵活性强的布局方式,它能够很好的控制内部元素的宽度,高度或者剩余的空间部分,来适应不同的显示设备和不同的屏幕尺寸,而真正达到一种自适应效果.flex整个模块不只是一个属性,它涉及很多东西以及一系列属性.设置为flex标签的被称为flex容器,

csstpeixun / 0评论 2015-12-04

CSS3 Flex 弹性布局用法详解

什么是Flex弹性布局Flex是Flexible Box的简称，意为弹性布局，顾名思义，在网页布局时，他可以给我们提供更多的灵活性。后面我们就使用Flex容器和 Flex项目来进行介绍。可取的值：0 | 1flex-shrink用于定义Flex项目的缩小比

zhuizhuizhui / 0评论 2015-10-15

CSS3 之 flex

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局：display: flex; 行内元素： display: inline-flex;Webkit

云端漂移 / 0评论 2019-06-27

CSS3盒模型display:box;box-flex详解

display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chr

AlisaClass / 0评论 2015-06-16

CSS魔法堂：Flex布局

前言Flex是Flexible Box的缩写，就是「弹性布局」。从2012年已经面世，但由于工作环境的原因一直没有详细了解。最近工作忙到头晕脑胀，是要学点新东西刺激一下大脑，打打鸡血。Flex就这么简单浏览器兼容性一说到兼容性就是永远的痛，不过幸运的是只要

尚衍亮 / 0评论 2019-06-27

【CSS练习】IT修真院--练习1-九宫格

三. 开发计划1. 开发[x] index.html建九个div.block[x] app.css设定block大小颜色圆角横排[x] 寻找自适应方法。div大小随屏幕变化令block的高度等于宽度[x] 猜想：block父级宽度跟随屏幕变化，block始

yaodilu / 0评论 2019-06-27

CSS3中display属性的Flex布局-圣杯布局实例

之前做pc端的时候，要求兼容到ie8，也不会注意到它。后来做移动端，第一次看到display：flex，还是从一个实习生的代码里，然后查了查资料，居然是这么方便。简单的使用及原理请查看阮一峰大神的讲解。}flex-directionflex-wrapfle

Phoebe的学习天地 / 0评论 2019-06-27

Css3之Flex布局

Flex 弹性布局传统的布局解决方案，基于盒模型，通过 css中的display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。容器默认存在水平主轴main axis和垂直的交叉轴cross

nicepainkiller / 0评论 2019-06-27

CSS3盒模型display:box详解

display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chr

mokingone / 0评论 2014-11-29

css flex应用

-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */

csscode / 0评论 2014-11-18

CSS布局之flex布局

最近项目中涉及到手机端开发，那么flex布局是必不可少的，这里我来重新梳理一下1. 介绍flex布局也被成为伸缩盒布局，在flex布局模型中，flex容器的子元素可以在x轴或y轴上进行布局，并且子元素可以伸缩他们的大小，当容器中还有空间它们会伸展以填充容器

云端漂移 / 0评论 2019-06-26

CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局

前言我曾一度觉得总写css的前端很low，有了这种思想以后我便远离网页布局，H5的工作更不想接，沉迷于页面逻辑和封装组件。这有什么决定性的问题吗 ？说的有点多，其实写这边文章的主要目的还是想告诉自己，不要瞧不起某一门技术，技术有高低，但不代表学css的人的

afeichuanqi / 0评论 2019-06-26

CSS Flex 布局：用 Flex 来实现圣杯布局

Flex 布局是 W3C 2009年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。Flex 布局使用起来是非常简单的，本文谈一谈平时使用可能需要注意的问题。flex-growflex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余

葉無聞 / 0评论 2019-06-26

【CSS基础】Flex弹性布局

在flex容器中默认存在两条轴，水平主轴和垂直的交叉轴，这是默认设置，当然可以通过修改相关属性使垂直方向变为主轴，水平方向变为交叉轴，在容器中，每个单元块称为flex item，每个flex item占据主轴空间为main size，占据交叉轴空间为cro

afeichuanqi / 0评论 2019-06-26

Flex入门的好书——《Flex3 Cookbook 中文版》

4.15节. 找出TextArea中最后被显示的字符第五章. Lists，Tiles和Trees

vanloswang / 0评论 2014-01-13

一只菜鸟对于弹性布局的总结

以前盒子的布局都是使用position、float、display来布局的，其实超级烦的，最近发现了一个知识点，那就弹性布局，那就让我们来看看什么是弹性布局吧！What's 弹性布局弹性就是Flex，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为

YardStrong / 0评论 2019-06-26