flex布局

flex布局

1.在不使用浮动和框架的前提下实现元素的排列。
2.代替浮动使布局更加方便
3.对齐方式包括了水平方向与垂直方向
4.弹性项目可通过CSS重新排序

创建方式
添加属性 dispaly:flex;

模板样式
在这里插入图片描述
flex布局存在两根轴:水平方向的称为主轴(main axis) ;垂直方向的称为交叉轴(cross axis).

主轴的开始位置叫做main start,结束位置叫做main end.

交叉轴的开始位置叫 cross start,结束位置叫作cross end.

flex布局的属性介绍与演示

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

flex-direction:row;

此为默认值即横向排列。
在这里插入图片描述
**flex-direction: column;**纵向排列
在这里插入图片描述

flex-direction: row-reverse;右对齐

在这里插入图片描述

flex-direction: column-reverse;起点在下沿。
在这里插入图片描述

flex-wrap属性用于当一条轴线上项目排不下时,如何换行。
1.flex-wrap: nowrap ;默认值(不换行)
在这里插入图片描述
2.flex-wrap: wrap;换行第一行在上面
在这里插入图片描述
3.flex-wrap: wrap-reverse;换行,第一行在下方。
在这里插入图片描述
** flex-flow**
flex-flow是flex-direction属性和flex-wrap属性的简写形式。
姑在这不多做叙述。具体属性可参照上面、

flex-basis
flex-basis属性定义项目占据的主轴空间
效果与with属性一样。

** justify-content属性**

justify-content属性定义的是内容在主轴上的对齐方式

justify-content: flex-start;是其初始值即左对齐

justify-content: flex-end;为右对齐
在这里插入图片描述

justify-content: center;为居中对齐
在这里插入图片描述

justify-content: space-around;使项目两侧的间隔相等
在这里插入图片描述

justify-content: space-between;使项目与项目之间的间隔相等
在这里插入图片描述
justify-content: space-evenly;使元素均匀排列

align-items属性

align-items属性定义项目在交叉轴上的对齐方式

**align-items: stretch;**默认值

align-items: flex-start;交叉轴的起点对齐。
在这里插入图片描述
align-items: flex-end;
交叉轴的终点对齐

在这里插入图片描述
**align-items: center;**交叉轴的中点对齐
在这里插入图片描述
**align-items: baseline;**与项目的第一行文字的基线对齐
在这里插入图片描述

align-content属性

用于多根轴线的对齐方式。如果是当单轴线时则不起作用。

**align-content: flex-start;**与交叉轴的起点对齐

在这里插入图片描述
align-content: flex-end;与交叉轴的终点对齐

align-content: center;与交叉轴中点对齐。

align-content: space-between;与交叉轴的两端对齐
在这里插入图片描述
**align-content: space-around;**使每根轴线之间的间隔相等

align-self属性

对于单个项目进行设置。除去auto属性以外其余属性与align-items属性完全一致。

align-self: flex-end;使单个项目位于底部
在这里插入图片描述

align-self: center; 使单个项目居中

**align-self: flex-start;**使单个项目位于顶部

order属性

order属性用于定义项目的排列顺序。值越小,顺位越靠前。

已标记关键词 清除标记
相关推荐
【为什么还需要学习C++?】 你是否接触很多语言,但从来没有了解过编程语言的本质? 你是否想成为一名资深开发人员,想开发别人做不了的高性能程序? 你是否经常想要窥探大型企业级开发工程的思路,但苦于没有基础只能望洋兴叹?   那么C++就是你个人能力提升,职业之路进阶的不二之选。 【课程特色】 1.课程共19大章节,239课时内容,涵盖数据结构、函数、类、指针、标准库全部知识体系。 2.带你从知识与思想的层面从0构建C++知识框架,分析大型项目实践思路,为你打下坚实的基础。 3.李宁老师结合4大国外顶级C++著作的精华为大家推出的《征服C++11》课程。 【学完后我将达到什么水平?】 1.对C++的各个知识能够熟练配置、开发、部署; 2.吊打一切关于C++的笔试面试题; 3.面向物联网的“嵌入式”和面向大型化的“分布式”开发,掌握职业钥匙,把握行业先机。 【面向人群】 1.希望一站式快速入门的C++初学者; 2.希望快速学习 C++、掌握编程要义、修炼内功的开发者; 3.有志于挑战更高级的开发项目,成为资深开发的工程师。 【课程设计】 本课程包含3大模块 基础篇 本篇主要讲解c++的基础概念,包含数据类型、运算符等基本语法,数组、指针、字符串等基本词法,循环、函数、类等基本句法等。 进阶篇 本篇主要讲解编程中常用的一些技能,包含类的高级技术、类的继承、编译链接和命名空间等。 提升篇: 本篇可以帮助学员更加高效的进行c++开发,其中包含类型转换、文件操作、异常处理、代码重用等内容。
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页