flex布局个人总结
<html>
<div class="box1">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="box2">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</html>
<style>
.box1{
/* display: flex; */ /* 块级元素flex布局 */
/* display: inline-flex; */ /* 行列元素flex布局 */
/* display: flex;
flex-direction:row; */
/* 父级左浮动 顺序*/
/* display: flex;
flex-direction:row-reverse; */
/* 子级倒序 右浮动 */
/* display: flex;
flex-direction:column; */
/* 子级随标签元素（块级或者行内） 顺序 */
/* display: flex;
flex-direction: column-reverse; */
/* 子级随标签元素（块级或者行内） 倒序 */
/* display: flex;
flex-wrap: nowrap; */
/* 不换行 不管子级的宽度，即使子级宽度超过父级宽度也不会换行。*/
/* display: flex;
flex-wrap: wrap; */
/* 换行，超过父级就换行。 */
/* display: flex;
flex-wrap: wrap-reverse; */
/* 只要换行子级就倒序排列，不换行还是顺序 */
/* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */
/* display:flex; */
/* flex-flow: column wrap; */
/* display: flex;
justify-content:flex-start; */
/* 左对齐（倒序） */
/* display: flex;
justify-content:flex-end; */
/* 右对齐（顺序） */
/* display: flex;
justify-content:center; */
/* 居中（顺序） */
/* display: flex;
justify-content:space-between; */
/* 两端对齐，项目之间的间隔都相等。 */
/* display: flex;
justify-content:space-around; */
/* 每个项目两侧的间隔相等。 */
}
.box1span{
text-align: center;
border:1px solid #ccc;
}
.box2{
display: flex;
width:100%;
}
.box2 span{
flex-grow: 1;
width:0;
bordeR:1px solid #f00;
}
</style>
flex布局个人总结的更多相关文章
- Flex 布局教程：语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- Flex 布局教程：实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
- css flex布局
关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...
- FLEX布局的一些问题和解决方法
前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...
- CSS之flex布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- flex布局示例
来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...
- 【转】Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- [flex布局]-flex教程
简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...
- flex布局
一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...
随机推荐
- 【非原创】sg函数模板
学习博客:戳这里 解题模型: 1.把原游戏分解成多个独立的子游戏,则原游戏的SG函数值是它的所有子游戏的SG函数值的异或. 即sg(G)=sg(G1)^sg(G2)^...^sg(Gn) ...
- PAT L2-016. 愿天下有情人都是失散多年的兄妹 (BFS)
L2-016. 愿天下有情人都是失散多年的兄妹 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 呵呵.大家都知道五服以内不得通婚 ...
- UESTC - 1222 Sudoku（深搜）
Yi Sima was one of the best counselors of Cao Cao. He likes to play a funny game himself. It looks l ...
- HDU 3065 病毒侵袭持续中（AC自动机 模板）题解
题意:给出主串中每个模式串的个数 思路:毒瘤出题人多组数据没说给的是多组数据. 板子: struct Aho{ struct state{ int next[130]; int fail, cnt; ...
- IPC$入侵
一 唠叨一下: 网上关于ipc$入侵的文章可谓多如牛毛,而且也不乏优秀之作,攻击步骤甚至可以说已经成为经典的模式,因此也没人愿意再把这已经成为定式的东西拿出来摆弄. 二 什么是ipc$ IPC$(In ...
- JPG学习笔记3（附完整代码）
#topics h2 { background: rgba(43, 102, 149, 1); border-radius: 6px; box-shadow: 0 0 1px rgba(95, 90, ...
- 手把手搭建一套私有 npm 服务
手把手搭建一套私有 npm 服务 gnpm xnpm pnpm lnpm refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
- 编程术语 All In One
编程术语 All In One js 名词,术语 函数 函数签名 一个函数签名 (或类型签名,或方法签名) 定义了 函数 或 方法 的输入与输出. 一个签名可以包括: 参数 及参数的 类型 一个返回值 ...
- Learning Web Performance with MDN
Learning Web Performance with MDN Web 性能是客观的衡量标准,是加载时间和运行时的感知用户体验. https://developer.mozilla.org/en- ...
- React Big Changes All in One
React Big Changes All in One React 重大更新 React Versions React 版本变更 https://reactjs.org/versions/ sema ...