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布局的一些简单用法效果(下图) 实现代码:  <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 ...

随机推荐

ucosIII学习笔记——钩子函数
一开始听见钩子函数感觉很莫名其妙,更不知道它有何作用,这是第一篇博客,也是学习ucosIII操作系统的一个开始吧. 在系统中有开发者自己创建的任务也有系统内部任务 ,UCOSIII中有五个系统任务,分 ...
国产网络测试仪MiniSMB - 双击就可以直接编辑数据报文字段（如IP地址）
国产网络测试仪MiniSMB(www.minismb.com)是复刻smartbits的IP网络性能测试工具,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此以太 ...
使用cfssl生成自签证书
安装ssl wget https://pkg.cfssl.org/R1.2/cfssl_linux-amd64 wget https://pkg.cfssl.org/R1.2/cfssljson_li ...
codeforces 2C（非原创）
C. Commentator problem time limit per test 1 second memory limit per test 64 megabytes input standar ...
js function All In One
js function All In One js ES5 Function & js Arrow Function Object vs Array 花括号 ?对象 , 傻傻分不清 // ar ...
SwiftUI & MVVM
SwiftUI & MVVM design paradigm / 设计模式 MVVM Model View ViewModel MVVM Architecture 架构 MVC Model V ...
1+X 证书制度
1+X 证书制度教育部职业技术教育 http://www.cvae.com.cn/zgzcw/tzgg/202001/c0ddd6c87e6c42839f8cc3e09a2dce89.shtml 2 ...
react new features 2020
react new features 2020 https://insights.stackoverflow.com/survey/2019#technology-_-web-frameworks h ...
React Native & CodePush & App Center
React Native & CodePush & App Center https://docs.microsoft.com/en-us/appcenter/distribution ...
VAST算力增值效应，助力NGK全生态产业链！
虽然比特币和区块链在2009年就诞生了,但它们对于一些人来说好像还是很遥远,归根结底还是由于数字货币始终未能在全球真正实现流通和支付功能.区块链1.0,以比特币为代表,实现了数字支付:区块链2.0,E ...

flex布局个人总结

flex布局个人总结的更多相关文章

随机推荐

热门专题