flex layout & demos

https://codepen.io/xgqfrms/pen/jjLPKN

https://css-tricks.com/snippets/css/a-guide-to-flexbox/



.flex-box {

    dispaly: flex;

    border: 1px solid red;

    height: 100px;

    position: relative;

    display: flex;

    flex-flow: row wrap;

    justify-content: flex-start;

    align-items: stretch;

    align-content: stretch;

    box-sizing: border-box;

    margin: 10px;

}

.flex-item {

    height: 30px;

    margin: 5px;

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

.item1 {

    flex: 1 1 auto;

    width: 80vw;

    background: #0f0;

}

.item2 {

    flex: 0 1 auto;

    width: 20vw;

    background: #f0f;

}

.item3 {

    flex: 1 1 auto;

    width: 20vw;

    background: #0f0;

}

.item4 {

    flex: 0 1 auto;

    width: 20vw;

    background: #f0f;

}

refs

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

flex layout & demos的更多相关文章

  1. CSS3 & Flex Layout All In One

    CSS3 & Flex Layout All In One demos https://www.cnblogs.com/xgqfrms/p/10769302.html .flex-contai ...

  2. [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

    本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...

  3. Flex Layout Attribute

    GitHub: https://github.com/StefanKovac/flex-layout-attribute 引入基本的样式,可以更好的布局,可以在线制作: http://progress ...

  4. pure CSS waterfall layout

    pure CSS waterfall layout 纯 CSS 瀑布流布局 flex layout .container{} .item{} https://caniuse.com/?search=c ...

  5. CSS Flex布局完全指南 #flight.Archives002

    Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...

  6. 微信小程序开发之搞懂flex布局1——Flexbox

    Flexbox ——弹性布局 Flexbox is a layout model for displaying items in a single dimension — as a row or as ...

  7. CSS魔法堂：Flex布局

    前言  Flex是Flexible Box的缩写,就是「弹性布局」.从2012年已经面世,但由于工作环境的原因一直没有详细了解.最近工作忙到头晕脑胀,是要学点新东西刺激一下大脑,打打鸡血. Flex就 ...

  8. CSS ? Layout Module : CSS 布局模型

    1 1 1 https://www.w3.org/TR/css-grid-1/ CSS Grid Layout Module Level 1 W3C Working Draft, 19 May 201 ...

  9. CSS Layout All In One

    CSS Layout All In One CSS2 position float % px , rem, em CSS3 flex grid multi column vw / vh 常见布局模式 ...

随机推荐

  1. 京东零售mockRpc实践

    https://mp.weixin.qq.com/s/A0T6ySub0DfQiXJAbWm2Qg jsf协议是基于tcp的而且对数据进行了序列化.加密等操作,直接截获的方式很难实现.最后决定注入自己 ...

  2. 回归测试_百度百科 https://baike.baidu.com/item/%E5%9B%9E%E5%BD%92%E6%B5%8B%E8%AF%95

    回归测试_百度百科https://baike.baidu.com/item/%E5%9B%9E%E5%BD%92%E6%B5%8B%E8%AF%95

  3. （Sql Server）SQL FOR XML PATH

    FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...

  4. 收集整理Idea常用配置及插件

    收集整理Idea常用配置及插件 一.IDEA配置 1.1 代码智能提示,忽略大小写 二.IDEA插件 2.1 Background Image Plus 2.2 Codota-代码智能提示 2.3 S ...

  5. Java 集合框架（）

    一概述 二Collection接口 List Set Queue 三Map接口 HashMap LinkedHashMap TreeMap 四其它集合类 Vector Stack HashTable ...

  6. StreamingContext详解，输入DStream和Reveiver详解

    StreamingContext详解,输入DStream和Reveiver详解 一.StreamingContext详解 1.1两种创建StreamingContext的方式 1.2SteamingC ...

  7. hadoop知识点总结（二）hdfs分布式文件系统

    1, hdfs设计:减少硬件错误的危害,流式数据访问,大规模数据集,简单的一致性模型 2,特点: 1)移动计算的代价比移动数据的代价低 在异构的软硬件平台间的可移植性 2)局限性 不适合低延迟性数据访 ...

  8. 1.Centos7修改主机名

    1.在CentOS7中,有三种定义的主机名: 静态的(Static hostname):也称为内核主机名,是系统在启动时从/etc/hostname自动初始化的主机名. 瞬态的(Tansient ho ...

  9. 从NMEA0183到GNSS定位数据获取（一）原理篇

    作者:良知犹存 转载授权以及围观:欢迎添加微信公众号:Conscience_Remains 总述 GPS我们都知道,一种用来全球定位的系统,后来俄罗斯推出了格洛纳斯定位系统,中国推出了北斗定位,欧盟有 ...

  10. [OpenCV]获取摄像头视频

    环境:Windows 8 64bit + VS2012 X64 + OpenCV 2.4.7 摄像头的捕捉使用VideoCapture类 Class VideoCapture    [OpenCV文档 ...