css flex相关,长期更新

这里暂时不是入门教学,是flex知识收集

兼容性
display: flex;
display: -webkit-flex;

其余新属性前面加-webkit-
  

Flex属性(the first value is the default one of the property)
  direction:ltr/rtl //the flex line

  flex-direction:flex-start/flex-end/center/space-between/space-around //the main axis

  align-items:flex-start/flex-end/center/baseline/stretch //the cross axis

  flex-wrap:nowrap/wrap/wrap-reverse

  align-content:stretch/flex-start/flex-end/center/space-between/space-around

  flex-flow: [flex-direction] [flex-wrap]

Flex Item属性
  order:0

  margin:auto

  align-self:stretch/flex-start/flex-end/center/baseline //overrides Flex Container‘s align-items

  flex: 0 1 auto/[Number]/initial/auto/none //不要用,除非把flex-basis部分设置auto,否则在ie里,box-sizing强制变content box
  flex: [flex-grow] [flex-shrink] [flex-basis]

  flex-basis:auto/[width]

  flex-grow:0

  flex-shrink:1

时间: 2024-11-08 02:05:33

css flex相关,长期更新的相关文章

[小细节,大BUG]记录一些小问题引起的大BUG(长期更新....)

[小细节,大BUG]  1. 在不久前,一个朋友出现了这样一个BUG:当UITableView加载cell的时候,自定义的cell,怎么显示,里面的文字总是显示不完全(注意,文字不长).然后,我帮忙给看了下,甚至把在storyBoard中将cell的相关属性都试了下,虽然可以解决,但是效果不理想.最终经过排查,终于发现问题所在:当自定义cell时,因为需要布局子控件,所以他重写了layoutSubviews方法,然而在此方法中没有调用[super layoutSubviews],所以造成了布局混

Java代码优化(长期更新)

前言 2016年3月修改,结合自己的工作和平时学习的体验重新谈一下为什么要进行代码优化.在修改之前,我的说法是这样的: 就像鲸鱼吃虾米一样,也许吃一个两个虾米对于鲸鱼来说作用不大,但是吃的虾米多了,鲸鱼自然饱了. 代码优化一样,也许一个两个的优化,对于提升代码的运行效率意义不大,但是只要处处都能注意代码优化,总体来说对于提升代码的运行效率就很有用了. 这个观点,在现在看来,是要进行代码优化的一个原因,但不全对.在机械工艺发展的 今天,服务器动辄8核.16核,64位CPU,代码执行效率非常高,St

全网最佳CY7C68013A开发板,USB2.0高速核心板,独家最全开发资料,长期更新支持

铺天盖地的USB开发板.USB核心板那款最适合您?IFLabs组织专业团队.不惜成本.耗费大量时间精力打造的精品USB核心板是您最佳的选择,优化的核心板结构.全网最全的开发手册.全面的配件,一套在手即可开展USB接口的开发.只需这一次投入,即可实现USB接口开发的从入门到精通! 史无前例的专业.可靠.全面.豪华,绝不是其他低价产品所能比的.无论你是初学者,还是具有USB开发基础的工程师都值得拥有. IFLabs USB2.0 FX2LP核心板开发板详情:http://item.taobao.co

87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 display:flex 注:设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效. 注:Safari 6.1+(前缀-webkit-) iOS 7.1+(前缀-webkit-)最新flex 兼容性查看请点此处 最新Flex兼容性 Flex 容器 flex contain

代码优化(长期更新)

前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用,但是,吃的小虾米一多之后,鲸鱼就被喂饱了.代码优化也是一样,如果项目着眼于尽快无BUG上线,那么此时可以抓大放小,代码的细节可以不精打细磨:但是如果有足够的时间开发.维护代码,这时候就必须考虑每个可以优化的细节了,一个一个细小的优化点累积起来,对于代码的运行效率绝对是有提升的. 代码优化的目标是:

用CSS border相关属性画三角形

效果 HTML: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Triangle Demo</title> <link rel="stylesheet" href="triangle.css"> </head> <body&g

查漏补缺(长期更新)

前言 Java的部分有基础.设计模式.IO.NIO.多线程,之后有时间还会把集合这部分补上去,这么多内容里面,难免有一些知识点遗漏,本文主要是讲解这些遗漏的知识点.这些知识点,不是特别大的难点,所以没有必要专门写一篇文章讲解:但是这些知识点,也不是一两句话就说得清楚的,所以放在这里.本文和前面的代码优化.类继承接口实现一样,也是一篇长期更新的文章,只要想到有遗漏的知识点,就会随时更新此文. Thread.sleep(XXX)方法消耗CPU吗? 这个知识点是我之前认识一直有错误的一个知识点,在我以

[原创][FPGA]Quartus实用小技巧(长期更新)

0. 简介 在使用Quartus软件时,经常会时不时的发现一些小技巧,本文的目的是总结所查阅或者发现到的小技巧,本文长期更新. 1. Quartus中的模板功能 最近在Quartus II的菜单里找到了一个好去处:language template. 在Edit -> Insert Template下可以看到Verilog HDL.SystemVerilog.VHDL.AHDL.Quartus II TCL.TCL的语言模板. 在Verilog HDL下面,可以找到基本的逻辑操作符.基本语言结构

CSS Flex 新旧法语对比

CSS Flex 新旧法语对比 老版本的语法 定义容器的display属性 .box{ display: -moz-box; /*Firefox*/ display: -webkit-box; /*Safari,Opera,Chrome*/ display: box; } 容器属性 1.box-pack 属性 box-pack定义子元素主轴对齐方式, box-pack(主轴对齐)属性总共有4个值: start(左对齐(默认)) | end(右对齐) | center(居中对齐) | justif