CSS弹性布局（一）

弹性布局可以用于做响应式页面的制作
使用弹性布局需要使用要display里的flex属性
例：让一个div是弹性布局，代码如下

.div{display:flex;}

flex里有很多属性，其中设置在容器上的属性有6个

1.flex direction:决定主轴的方向（即项目的排列方向）。

row:主轴为水平方向，起点在左边
例

<head><meta charset="utf-8"><title>弹性布局</title><style>.div{width: 1300px;background-color: green;height: 200px;display: flex;flex-direction:row;}.div1,.div2,.div3{width: 300px;height: 200px;}.div1{background-color: red;}.div2{background-color: darkcyan;}.div3{background-color: orange;}</style>
</head><body>
<div class="div"><div class="div1">one</div><div class="div2">two</div><div class="div3">three</div>
</div>
</body>

效果如下

row-reverse:主轴为水平方向，起点在右边。

.div{width: 1300px;background-color: green;height: 200px;display: flex;flex-direction:row;}

结果如下

column:主轴为垂直方向，起点在上沿。
例：

.div{width: 1300px;background-color: green;height: 200px;display: flex;flex-direction:column;}

结果如下

div的高度被自动压缩

column-reverse:主轴为垂直方向，起点在下沿。
例

.div{width: 1300px;background-color: green;height: 200px;display: flex;flex-direction:column-reverse;}

结果如下图

2.flex-wrap：一行排不下，如何换行

wrap:换行，第一行在上方
例

 .div{width: 100%;background-color: green;height: 200px;display: flex;flex-wrap: wrap;}

结果如下

nowrap:不换行
例

.div{width: 100%;background-color: green;height: 200px;display: flex;flex-wrap: wrap;}

结果如下

div不换行，宽度自动收缩

wrap-reverse:换行，第一行在下方。
例

.div{width: 100%;background-color: green;height: 200px;display: flex;flex-wrap: wrap-reverse;margin-top: 200px;}

结果如下

3.flex-flow：flex-direction属性和flex-wrap属性的简写形式

例

.div{width: 100%;background-color: green;height: 200px;display: flex;flex-flow: row wrap;margin-top: 200px;}

4.justify-content:项目在主轴上的对齐方式

flex-start:左端对齐
例

.div{width: 100%;background-color: green;height: 200px;display: flex;justify-content:flex-start;margin-top: 200px;}

结果如下

flex-end:右端对齐
例

.div{width: 100%;background-color: green;height: 200px;display: flex;justify-content:flex-end;margin-top: 200px;}

结果如下

center:居中对齐
例

.div{width: 100%;background-color: green;height: 200px;display: flex;justify-content:center;margin-top: 200px;}

结果如下

-space-around:每个项目两侧的间隔相等
例

.div{width: 100%;background-color: green;height: 200px;display: flex;justify-content:space-around;margin-top: 200px;}

结果如下

-space-between:两端对齐，项目之间的间隔都相等
例

.div{width: 100%;background-color: green;height: 200px;display: flex;justify-content:space-between;margin-top: 200px;}

结果如下

5.align-items:项目在交叉轴上如何对齐

flex-start
例

.div{width: 100%;background-color: green;height: 200px;display: flex;justify-content:space-between;align-item:flex-start;}

结果如下

flex-end
例

.div{width: 100%;background-color: green;height: 200px;display: flex;justify-content:space-between;align-item:flex-end;}

结果如下

center
例

.div{width: 100%;background-color: green;height: 200px;display: flex;justify-content:space-between;align-item:center;}

结果如下

stretch::如果项目未设置高度或设为auto，将占满整个容器的高度。
例

.div{width: 100%;background-color: green;height: 500px;display: flex;justify-content: space-between;align-items: stretch;}

结果如下

baseline:项目的第一行文字的基线对齐。
例

.div{width: 100%;background-color: green;height: 500px;display: flex;justify-content: space-between;align-items: stretch;}

6.align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

CSS弹性布局（一）相关推荐

使用css弹性布局，让页面footer底部固定
在前端开发过的工作中,footer永远固定在底部的需求.也就是说一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏 ...
css弹性布局自动换行怎么实现,网页设计常用布局之CSS弹性布局
#网页设计#在网页设计中内容的排版和布局往往是整个设计工作的重点和难点,如果能熟练掌握CSS弹性布局的话,无论是页面的整体设计还是局部内容的布局,都能起到事半功倍的效果.尤其是对非专业的或刚开始从事前 ...
一、CSS弹性布局[弹性盒子、弹性元素]
一.CSS弹性布局 1.弹性盒子弹性盒子的属性全都是写在父元素上面 1.1基础解释:在父元素上写上display:flex;或者display:inline-flex;子元素就会出现弹性效果,其中 ...
前端css弹性布局各种属性
前端css弹性布局各种属性一.基本概念 Flexbox 是 flexible box 的简称(注:意思是"灵活的盒子容器")又叫弹性布局,是 CSS3 引入的新的布局模式.它决定 ...
css弹性布局笔记一（垂直居中、水平居中、居中）（display:flex）
CSS弹性布局,需要一个容器,容器中至少包含一个以上的元素,以下代码包含子元素垂直居中.水平居中.居中三种情况 <html> <head> <style type=&qu ...
前端css弹性布局，响应式布局，多列布局
前端css弹性布局,响应式布局,多列布局主页 <!DOCTYPE html> <html><head><meta charset="utf-8&q ...
css弹性布局多个div居中多行锤子水平居中万能方案
css弹性布局多行锤子水平居中万能方案任何一个容器可以指定为flex布局,但是td和th等标签本身已有布局,所以重写display属性会使元素失去原有的布局特性 *{display:flex} ...
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
目录前言 Flex 布局是什么? Flex 简介 Flex 容器属性 Flex 基本使用场景一 flex-direction 场景二 justify-content align-it ...
CSS弹性布局网格布局
一.Flexbox 弹性框布局模块,可更轻松设计灵活的响应式布局,而无需使用浮动或定位. 首先应给容器设置display 属性 <div class="flex-container&q ...
CSS 弹性布局（flex）的height计算
疑惑现象: 弹性布局父元素的height=所有子元素的元素高度,而子元素又能继承父元素高度(height:100%). 可能过程: 先使用子元素总高度撑起父元素高度,子元素再继承父元素高度. 测试代码 ...

CSS弹性布局（一）

1.flex direction:决定主轴的方向（即项目的排列方向）。

2.flex-wrap：一行排不下，如何换行

3.flex-flow：flex-direction属性和flex-wrap属性的简写形式

4.justify-content:项目在主轴上的对齐方式

5.align-items:项目在交叉轴上如何对齐

6.align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

CSS弹性布局（一）相关推荐

最新文章

热门文章