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属性 前置
随机推荐
- ora-904 rowid create materialized view
create materialized view t_v asselect t1.*,1 as marker,rowid from t1 t1union allselect t2.*,2 as mar ...
- dubbo-启动时检查
dubbo缺醒会在启动时检查依赖的服务是否可用,不可用时会抛出异常,阻止Spring初始化完成,以便上线时,能及早发现问题,默认 check=true 可以通过 check=false 关闭检查,比如 ...
- mysql添加Federated引擎问题
现在我有这么一个需求, 就是有两个项目, 一个叫项目A,一个项目B, 由于A的用户表和B的用户表是要实现一样的. 例如: 我在A项目中注册了,要实现在B项目中也能登录, 当用到B的时候, 由于B数据库 ...
- 【4opencv】CLR基本原理和如何运用于GOCW
GOCW的重点和难点就在于Csharp调用OpenCV,其中的桥梁就是CLR,当然我们也有其他方法,但是CLR是一个比较新的.比较可靠的.关键是能用的桥梁.这里关于CLR的基本原理知识.如何用于GOC ...
- 前端基础小标签3 H5新标签
第二部分H5的新标签一.<!-- mark标签 1.用于显示页面中需要重点关注的内容,就像看书需要用荧光笔划重点一样 2.浏览器通常会用黄色显示m ...
- Python标准库inspect
inspect模块用于收集python对象的信息,可以获取类或函数的参数的信息,源码,解析堆栈,对对象进行类型检查等等,有几个好用的方法: getargspec(func) 返回一个命名元组ArgSp ...
- vs2015 + Python3.5 环境搭建
1. vs2015只支持Python3.5及以前的版本,对应Anaconda3.4.2之前的版本. 2. 卸载掉所有安装过的Python 3. 建议重装VS2015, 因为增量升级Python Too ...
- Forms Authentication and Role based Authorization: A Quicker, Simpler, and Correct Approach
https://www.codeproject.com/Articles/36836/Forms-Authentication-and-Role-based-Authorization Problem ...
- js动画（速度）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...
- computed 计算选项
computed 的作用主要是对原数据进行改造输出.改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……. 格式化输出结果 我们先来做个读出价格的例子:我们读书的原始数据是price:100 ...