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. get_or_create update_or_create

    django/query.py at master · django/django https://github.com/django/django/blob/master/django/db/mod ...

  2. Android字节码优化工具redex初探

    https://mp.weixin.qq.com/s/Og2TkGrZR490h9-KO23lmw 背景 apk瘦身和启动时间优化是移动端开发性能优化中经常被提到的两个问题.apk瘦身的常规做法有,s ...

  3. 翻页bug 在接口文档中应规范参数的取值区间 接口规范

    <?php$a=array("red","green","blue","yellow","brown&q ...

  4. libco协程原理简要分析

    此文简要分析一下libco协程的关键原理. 在分析前,先简单过一些协程的概念,以免有新手误读了此篇文章. 协程是用户态执行单元,它的创建,执行,上下文切换,挂起,销毁都是在用户态中完成,对linux系 ...

  5. pycharm创建文件夹以及查看源文件存放位置（FOR MAC）

    1.首先我们打开pycharm软件,一般首次打开界面如下 2.我们点击creat new project,点击后效果如下,此时创建相应的文件夹 3.创建完成后如下,并可以查看存放文件夹的位置 4.完成 ...

  6. loj10018数的划分

    题目描述 将整数 n 分成 k 份,且每份不能为空,问有多少种不同的分法.当 n=7,k=3 时,下面三种分法被认为是相同的:1 1 5;1 5 1 ;5 1 1 输入格式 一行两个数 n ,k . ...

  7. Linux 输入输出重定向, &>file, 2>&1, 1>&2

    Linux 输入输出重定向, &>file, 2>&1, 1>&2 一.1和2在Linux中代表什么 1.1 输出重定向 1.2 输入重定向 1.3 绑定重定 ...

  8. HBase协处理器加载过程（1.2.x）

    一.首先来看ObserverCoprocessor:1.观察者协处理器的静态加载的配置是在hbase-site.xml中配置如下属性:通过hbase.coprocessor.region.classe ...

  9. Selenium爬虫实践（踩坑记录）之ajax请求抓包、浏览器退出

    上一篇: 使用Selenium截取网页上的图片 前言 最近在搞公司内部系统,累的一批,需要从另一个内部系统导出数据存到数据库做分析,有大量的数据采集工作,又没办法去直接拿到那个系统的接口,太难了,只能 ...

  10. MySQL复合索引探究

    复合索引(又称为联合索引),是在多个列上创建的索引.创建复合索引最重要的是列顺序的选择,这关系到索引能否使用上,或者影响多少个谓词条件能使用上索引.复合索引的使用遵循最左匹配原则,只有索引左边的列匹配 ...