flex布局之flex-direction

一、flex布局的原理

1,flex是”flexible Box”的缩写，意为”弹性布局”；

2.当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将会失效。

言而简之：flex布局原理就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

二、flex布局父项常见属性

flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素的排列方式(单行)
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

三、主轴和侧轴

1.在flex布局中，是分为主轴和侧轴两个方向的

默认主轴就是x轴方向，水平向右

默认侧轴方向就是y轴方向，垂直向下

2.属性值

flex-direction属性决定主轴的方向(即项目的排列方向)

当然，主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴了。但是子元素是跟着主轴来进行排列的

属性	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

<!DOCTYPE html>

<head>

<style>

div {

/*给父级添加flex，里面的行内元素就转换成了块级元素 */

display: flex;

width: 300px;

height: 150px;

background-color: skyblue;

margin: 0 auto;

/* 默认是沿着x轴排列的 */

/* flex-direction: row; */

/* 翻转，倒着排列 */

/* flex-direction: row-reverse; */

/* 设置y轴为主轴,x轴就成了侧轴 */

/* flex-direction: column; */

/* 沿y轴翻转 */

flex-direction: column-reverse;

}

div span {

width: 90px;

height: 45px;

background-color: plum;

margin: 5px;

/* flex: 1; */

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

flex-direction:row;

flex-direction:row-reverse;

flex-direction:column;

flex-direction:column-reverse;

flex布局之flex-direction相关推荐

2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
Flex布局：Flex布局
1.flex布局与传统布局的区别传统布局: 兼容性好但是布局繁琐局限性,不能再移动端很好的布局 flex布局: 操作方便,布局简单,移动端应用广泛但是IE11或更低版本不支持flex布局使用范 ...
weex默认的flex布局_CSS flex布局入门
来源 | https://www.jianshu.com/p/1e40b1d3f20b 一. why flex 都知道html正常的文档流是自上而下排列的,块级元素会像下左图一样排列.但是项目中尤其是 ...
flex布局（flex 居中）
文章目录什么是flex 基本概念容器的属性 flex-direction flex-wrap flex-flow justify-content align-items align-content ...
Flex布局之flex：1
在我们常用的flex布局中,有对父元素设置的flex属性,也有对子元素设置的flex属性.而flex:1是对子元素设置的属性. flex属性:flex-grow,flex-shrink.flex-ba ...
flex布局（flex容器，flex属性）
文章目录前言一.flex(Flexible Box)概述二.flex容器,flex属性 1.flexBox弹性模型 2.基本概念详解 3.弹性容器的属性 4.弹性元素的属性 5.圣杯布局 6.垂 ...
flex布局设置flex后容器被内容撑开
就和图片中的效果一样.容器大小是不确定的,要根据内容来决定.但是被内容撑开,使用word-wrap:break-word;强制换行文字和字母无效这时将盒子的width设置为 0 ,然后使用 flex ...
Flex布局、flex容器和flex项目
1. Flex布局基础知识 ⑴ Flex弹性布局.任何一个HTML元素都可以指定为flex布局. Display:inline-flex; flex容器是内联块元素 Display:flex:flex ...
html flex布局换行,flex布局下换行兼容问题
最近使用flex布局大体上都没问题,就是一些版本都存在一点兼容问题尤其是换行的时候,我们来看下面的Less 文件! 各大浏览器兼容都写好了!但是还是存在换行问题 ,看列子 .flex-block() ...
html flex布局换行,flex布局换行后间隙问题
问题描述今天遇到flex布局换行后产生间隙的问题,本来预期得到以下结果 pre.PNG 具体实现如下: flex布局换行后间隙问题 html,body{ width: 100%; height: 1 ...

flex布局之flex-direction

flex布局之flex-direction相关推荐

最新文章

热门文章