flex属性的学习
1.需要记住的属性和值。
-------------------------------------------------------------方向横和纵flex-direction: row | row-reverse | column | column-reverse;
-------------------------------------------------------------
超过怎么办。flex-wrap: nowrap | wrap | wrap-reverse;
-------------------------------------------------------------
以上两个的简写。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
-------------------------------------------------------------
justify-content属性定义了项目在主轴上的对齐方式。左对齐，右对齐，中间，两端对齐，空间-环绕。
justify-content: flex-start | flex-end | center | space-between | space-around;
-------------------------------------------------------------
align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch;
-------------------------------------------------------------
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。align-content: flex-start | flex-end | center | space-between | space-around | stretch;
------------------------------------------------------------
2. CSS3 display：flex和display：box有什么区别
box 是旧属性，已经被flex代替。
flex和box都是伸缩盒，具体细节有区别。
一些浏览器可能只支持box.
由于css3还是讨论稿，所以一些属性可能随时被修改。
3.两边都是150px，中间的线的宽度自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="a50"></div>
<div id="children"> </div>
<div class="a50"></div>
</div>
<style>
#app{
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
}
#children{
flex:1;
border: 1px solid black;
}
.a50{
flex: 0 0 150px;
border: 1px solid red;
}
</style>
</body>
</html>
4.
5.
6.
flex属性的学习的更多相关文章
- CSS布局学习（二） - flex属性
flex属性 定义 flex布局包括最外层的容器和内部的元素,flex属性是内部元素属性.flex属性是flex-grow, flex-shrink, flex-basis三个属性的简写 flex-g ...
- css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
最近在研究css3的flex.遇到的flex:1;这一块,很是很纠结,flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了.网上大部分解释 ...
- [20190618]日常学习记录(二)-flex属性及vue实战
早上在看flex属性,总结一下它的优缺点 为什么使用flex, 她和浮动相比,代码更少.浮动要考虑左浮动右浮动,有时还要去清除浮动.flex一行代码就搞定了. 她更灵活,实现平均分配,根据内容大小分配 ...
- flex弹性布局学习笔记
前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...
- 小程序flex属性两边边距自适应
使用flex属性两边边距自适应解决方案 Justify-content:center 文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有 ...
- 详解 Flexible Box 中的 flex 属性
导读: 弹性盒子是 CSS3 的一种布局模式,一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有适当的行为的布局方式.其中 flex 属性用于指定弹性子元素如何分配空间. flex 属性的值 ...
- flex弹性布局学习
一.介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: ...
- flex属性
一.flex属性的归纳 flex-direction flex-wrap flex-flow justify-content align-items align-content 1.1 flex-di ...
- CSS3-flex弹性布局之flex属性
flex属性 前置
随机推荐
- 通过注册表regedit对Windows回收站进行恢复
误删资料恢复 一不小心,删错了,还把回收站清空了,咋办啊? 只要三步,你就能找回你删掉并清空回收站的东西 步骤: 1.单击"开始——运行,然后输入regedit(打开注册表) 2.依次展开: ...
- SqlBulkCopy类（将一个表插入到数据库）
利用SqlBulkCopy类一次插入多条数据,即将一个表直接插入数据库. 首先,新建一个表,要保证表中的列名与数据库表的字段保持一致. 如果数据库一张TableMenuRole表,ID自增,MenuI ...
- Eclipse中ctrl+shift+r与ctrl+shift+t的区别
eclipse中的两个常用的快捷键可以大大提升查找文件的效率,分别是: ctrl+shift+r : open resource, 打开资源. 它可以打开当前eclipse的工作区中所有(打开的)工程 ...
- opencv学习之路（4）、Mat类介绍，基本绘图函数
一.Mat类创建 Mat img;//创建无初始化矩阵 Mat img1(,,CV_8UC1);//200行,100列(长200,宽100) Mat img2(Size(,),CV_8UC3,Scal ...
- javascript 点击按钮实现隐藏显示切换效果
原文链接:http://www.jb51.net/article/79083.htm <html> <head> <meta charset="gb2312&q ...
- tftp 传输文件
tftp 服务方便文件传输,但是没有理清的话,容易传输错误. -g 表示下载文件 (get) -p 表示上传文件 (put)-l 表示本地文件名 (local file) -r 表示远程主机的文件名 ...
- Cannot add foreign key constraint @ManyToMany @OneToMany
最近在使用shiro做权限管理模块时,使用的时user(用户)-role(角色)-resource(资源)模式,其中user-role 是多对多,role-resource 也是多对多.但是在使用sp ...
- LabVIEW编程实例：如何通过TCP协议进行数据通信
对于网络通信来说,LabVIEW平台本身提供了多种方法加以实现,如可以通过TCP协议.UDP协议.DataSocket技术.甚至远程面板通信技术等方式进行通信. 下面通过一个简单的例子,演示在LabV ...
- 比较好的一些 ConcurrentHashMap讲解博客
jdk8 https://blog.csdn.net/jianghuxiaojin/article/details/52006118#commentBox jdk7.8 https://crossov ...
- hosts文件介绍
在Window系统中有个Hosts文件(没有后缀名),在Windows98系统下该文件在Windows目录,在Windows2000/XP系统中位于C:\Winnt\System32\Drivers\ ...