学习关于display ：flex 布局问题！
- 很多人不明白这个display:flex是到底是什么东西，如何使用的 。
1.什么是display：flex呢？
答：flex是 flexible box的缩写，意为弹性布局 ；这个东西的引入，为盒模型提供了最大的灵活性！可以相应式的实现各种页面的布局。
基本概念
采用flex布局的元素，称为flex容器(flex container)，简称容器。 在这个容器中默认存在两个轴：水平方向的主轴（main axis）和 垂直方向上的交叉轴（cross axis）。
图： （摘自：他人博客）
以下6个属性设置在容器上：
- flex-direction 容器项目的排列方向（默认是横向排列）
- flex-wrap 容器内项目的换行方式
- flex-flow flex-direction 和 flex-wrap 属性的复合属性。
- justify-content 项目在主轴上对齐样式
- align-item 项目在交叉轴上如何对齐
- align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
注意： 如果元素不是弹性盒对象的元素，则flex-flow 属性是不起作用的；
属性值
用法
<!DOCTYPE html>
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<style>
.father {
width: 500px;
height: 100px;
background-color: red;
display: flex;
flex-flow:row;
} .box1 {
flex: 3;
background: blue; }
.box2{
flex: 2;
background: pink;
}
</style>
</head> <body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body> </html>
以上仅是我个人初步学习！后期学习在进行更新! ~~~~~~~~~~~
学习关于display ：flex 布局问题！的更多相关文章
- 1.display:flex布局笔记
/*display:flex布局方式主要运用于垂直居中的效果*/ 一.Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局 注:设置为Flex布局之后,子元素的flo ...
- display:flex 布局教程，弹性布局！
display:flex 布局教程 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...
- display:flex 布局详解（2）
1. flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现 HTML代码: <div class=" ...
- CSS学习笔记：flex布局
目录 一.Flex布局简介 1. Flex布局的主要作用 2. Flex布局应用场景 二.Flex布局的使用 1. Flex布局的两种相关元素 2. 父项属性 2.1 flex- direction ...
- display:flex布局
/*背景 居中 自适应 铺满容器*/ background: center / cover; flex布局是什么? flex是Flexibe Box 的缩写,意思为”弹性布局”, 用来为盒子模型提供最 ...
- display: flex; 布局
废话不多说,供上我学习Flex布局的启蒙文章,一切的答案,尽在这里,仔细阅读,多多回味!保证你有所收获! http://www.ruanyifeng.com/blog/2015/07/flex-gra ...
- HTML/CSS：display:flex 布局教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- 【原创】display:flex布局大全
全都是自己写的 希望大家可以点个赞 谢谢! Html代码(没时间精简 请多包涵) <!DOCTYPE html> <html lang="en"> < ...
- 通过游戏来学习CSS的Flex布局
在复习Flex 布局的时候发现的了几个有趣的小游戏,在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上,游戏默认难度为Beginner ...
- display:flex 布局之 骰子
代码部分 html <body> <div class="box"> <div class="a a1"> <span ...
随机推荐
- 201621123002《java程序设计》第九周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 //功能需求:将所有大于5的生成一个新的List对象 List lis ...
- 摹客iDoc 新功能“柔性工作流”，让设计随需而动
摹客iDoc推出了全新“柔性工作流”,让协作设计自由流动,随需而动. 更高效.更自由的协作方式,赶快告诉你的团队吧~ “柔性工作流” VS “普通工作流” 普通工作流往往是将很多东西混杂在一起,并施以 ...
- Lucene学习笔记：基础
Lucence是Apache的一个全文检索引擎工具包.可以将采集的数据存储到索引库中,然后在根据查询条件从索引库中取出结果.索引库可以存在内存中或者存在硬盘上. 本文主要是参考了这篇博客进行学习的,原 ...
- HDU-4763 Theme Section KMP
题意:求最长的子串E,使母串满足EAEBE的形式,A.B可以任意,并且不能重叠. 题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=4763 思 ...
- 【Python】【BugList12】python自带IDLE执行print(req.text)报错：UnicodeEncodeError: 'UCS-2' codec can't encode characters in position 93204-93204
[代码] # -*- coding:UTF-8 -*- import requests if __name__ == '__main__': target = 'https://unsplash.co ...
- CKeditor5 图片上传
下面是自定义了一个适配器,之前我一直是在 ClassicEditor .create( editorElement, { ckfinder: { uploadUrl: '/ckfinder/core/ ...
- 在香港用什么软件可以唱歌？香港K歌app推荐
KTV的源头来自于日本,KTV是Karaok TV的缩写.随着互联网时代越来越发达,手机K歌成了很多人会选择的方式,那么在香港有什么好用的K歌软件呢?这里qt6小编给大家推荐几款好用的,让你足不出户即 ...
- Runnable和Callable 的区别
Runnable和Callable 的区别 01.Runnable接口中只有一个run()没有返回值 没有声明异常 Callable接口中只有一个call()有返回值 有声明异常 02.Calla ...
- android判断密码首字母大写正则表达式
判断首字母大写"[A-Z]\\w+" \\w所有字符 \\d所有数字
- LoRa与NB-IoT对比（转载）
物联网的基本架构包括三个层面:感知层.网络层和应用层. 物联网架构图 感知层通过传感器采集某些数据(声.光.电等),基于网络层的终端模组,对接到网络层的基站,实现数据采集后的传输. 网络层负责将感知层 ...