真香的flex弹性布局

如何实现一个左中右的布局

在flex出现之前

#box{
   color: white;
}
#left{
   float: left;
   width: 30%;
   background-color: red;
}
#right{
   float: right;
   width: 20%;
   background-color: green;
}
#center{
   background-color: blue;
   overflow:hidden;  /* 去除浮动换成 margin: 0 20% 0 30%; 效果一样 */
}
<div id="box">
   <div id="left">左</div>
   <div id="right">右</div>
   <!-- 浮动的元素一定要写在没浮动的样式前面 -->
   <div id="center">中间</div>
</div>

使用flex

#box{
   display: flex;
   color: white;
}
#left{
   width: 30%;
   background-color: red;
}
#right{
   width: 20%;
   background-color: green;
}
#center{
   background-color: blue;
   flex: 1;
}
<div id="box">
   <div id="left">左</div>
   <div id="center">中间</div>
   <div id="right">右</div>
</div>

上面看起来flex也没什么牛逼的地方啊

但是当你试着去#left里放上一张不知道高度的图片时,你会知道中间和右边的字要做到垂直居中是多么的困难,而flex只需要在#box里加上一句align-items:center;就行,flex真香了,这个属性是最常用的,而flex还有大量的功能,下面粗略列出来,具体使用看具体情况

#aa{
  /* flex的排列方向: 横向(默认), 横向反方向 , 纵向 , 纵向反方向 */
  flex-direction: row(default) | row-reverse | column | column-reverse;

  /* 横向使用时,当容器中的项目一行放不下的时候,是挤一挤还是换行,横向使用 */
  flex-wrap: nowrap(default) | wrap;

  /* 横向排列并且有空余位置时排列方式是,从左边开始 , 右边开始 , 中间 , 两端对齐 , 间隔等分 */
  justify-content: flex-start(default) | flex-end | center | space-between | space-around;

  /* 横向排列并且开启不换行nowrap时, 当同行的div高度不一样怎么排列Y轴, 一般是用center */
  align-items: flex-start(default) | flex-end | center | baseline;

  /* 横向排列并且开启换行wrap时, 换行的规则是,换行后Y轴怎么排列,常用是center和space-around */
  align-content: flex-start(default) | flex-end | center | space-between | space-around;
}

原文地址:https://www.cnblogs.com/pengdt/p/12037507.html

时间: 2024-11-01 04:00:50

真香的flex弹性布局的相关文章

flex 弹性布局整理

flex布局(弹性布局) 1.容器具备的属性有: flex-dirction:(决定主轴的方向)(即项目排列方向) 取值:row/row-reverse/column/column-reverse/ flex-wrap:(如果一条轴线排不了,如何换行) 取值:nowrap(默认):不换行. wrap:换行,第一行在上方. wrap-reverse:换行,第一行在下方. flex-flow :(flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为ro

flex弹性布局

Css3的flex布局用法 Flex意为"弹性布局",英文flexible box的缩写,flex布局使css盒模型变得更加强大和灵活,flex布局主要用在webapp和移动端中使用,移动端flex布局,将使的布局变得异常简单. 任何一个容器都可以指定为flex布局: 行内元素也可以使用flex布局. .box{display:inline-flex;} Webkit内核的浏览器,必须加上-webkit前缀 .box{ display:-webkit;/*Safari*/display

flex弹性布局学习总结

一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: 其中在webkit内核的浏览器中使用时,必须加上-webkit-前缀,以下不再重复说明. 下图为flex的相关概念的示意图 使用flex布局的容器(flex container),它内部的元素自动成为flex项目(flex item).容器拥有两根隐形的轴,水平的主轴(main axis),和竖

flex弹性布局学习

一.介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: 二.了解两个基本概念: 容器:需要添加弹性布局的父元素: 项目:弹性布局容器中的每一个子元素,称为项目: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end:交叉轴的开始位

Flex弹性布局在移动设备上的应用

引文 首先,我们有表格布局.当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局. 然后是现在大多数人都在使用的浮动布局.我们可以使用任何我们想用的元素,但浮动并不适用于初学者.表面上它看起来很基础,但背后复杂的功能可以使经验丰富的开发者看着自己的屏幕不知所措.另外,浮动布局有一个缺点就是需要通过额外的元素清除浮动,或者更好一点,可以清除CSS浮动而不添加额外的标签. 这些缺点使得浮动布局不是很容易掌握,因为没有一个默认的方法可以建立起浮动与元素之间的关系,所

display:flex弹性布局

一般的布局是基于盒模型,使用display属性 + float属性 + position属性.flex是h5中新增的页面布局方案. 一:flex布局是什么. flex是Flexible Box,就是"弹性布局".它具有非常好的灵活性. 任何容器都可以开启弹性布局. .box{ display:flex}; 行内元素开启弹性布局 .box{ dispaly: inline-flex}; webkit内核的浏览器,需要加前缀-webkit- .box{ display: -webkit-f

css flex弹性布局学习总结

一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性. 主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: 其中在webkit内核的浏览器中使用时,必须加上-webkit-前缀 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”. 它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”. 下图为flex的相关概念的示意图       

CSS Flex弹性布局

关于css3的flex布局,阮一峰老师的文章写的清晰易懂又全面,这里附上链接http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 浏览器支持 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现.2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布

flex弹性布局例子

<style> ul{ display: flex; width:300px; } li{ flex: 1; text-align: center; line-height: 100px; } ul li{ list-style:none; background:#6bc3e6; border-right:1px solid #fff; color:#fff; } body,p{margin:0;} </style> <body> <ul> <li&g