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. linux系统层面调优

    linux系统层面调优和常见的面试题 - 云+社区 - 腾讯云 https://cloud.tencent.com/developer/article/1664287

  2. 初始TypeScript

    什么是TypeScript? TypeScript是拥有类型系统的JavaScript的超集,可以编译成纯JavaScript: 1.类型检查:TS会在编译代码时进行严格的静态类型检查,这意味着可以在 ...

  3. win10自带输入法突然变成了繁体

    有可能是在使用Eclipse/MyEclipse的Ctrl + Shift + F进行代码格式化的时候与输入法的热键冲突了

  4. 编写高性能Java代码的最佳实践

    博客地址: http://blog.csdn.net/dev_csdn/article/details/79033972

  5. 学会lambda表达式，能让你少敲1000行代码！

    01.什么是 lambda 表达式 1. 函数式接口 在聊起 lambda 表达式之前,我们不得不提起函数式接口:一个接口只包含唯一的方法,那么它就是函数式接口.例如: public class La ...

  6. 环境变量设置，为什么要设置，tomcat的为什么不用设置？

    在学习JAVA的过程中,涉及到多个环境变量(environment variable)的概念,如PATH.正确地配置这些环境变量,是能够顺利学习.开发的前提.而经常出现的问题是:有的学习者能够按照提示 ...

  7. 一次小模块的使用过程-LC12S无线模块介绍

    前言: 最近帮人做了个小设备,使用了无线模块.触摸芯片,主要功能就是把触摸按键的信号无线传到控制继电器输出,MCU是STM8系列的芯片,其中使用过程中调试无线模块LC21S觉得挺好用的,就写了这篇文章 ...

  8. <<Hive编程指南>>读书笔记

    1. 设置hive以本地模式运行(即使当前用户是在分布式模式或伪分布式模式下执行也使用这种模式) set hive.exec.model.local.auto=true; 若想默认使用这个配置,可以将 ...

  9. ACM-ICPC 2017 Asia Xi'an

    ACM-ICPC 2017 Asia Xi'an Solved A B C D E F G H I J K 7/11 O O Ø O O ? O O O for passing during the ...

  10. Codeforces Round #631 div1C(或者div2E) Drazil Likes Heap 题解

    题目链接:https://codeforces.com/contest/1329/problem/C 或者:https://codeforces.com/contest/1330/problem/E ...