美文网首页
关于CSS - flex

关于CSS - flex

作者: hello大象 | 来源:发表于2018-10-05 10:12 被阅读0次
web常见设置元素属性 flex:容器和item

flex container 弹性容器flex item 弹性盒子

flex容器将消除item的块状特性:

flex弹性盒子模型会消除会消除其item的块级属性,变为inline属性。同时也意味着位于弹性盒子模型下,设置块级属性都是无效的。默认是row水平排列。

关于reverse的解密:view元素默认100%宽度,reverse的对其,方向也会反转。

justify-content属性解析 :1用于控制子元素flex item的对其方向的。2space-between,space-around等距分布

flex 布局中:

有两个重要的概念 主轴和交叉轴

主轴取决于 flex-direction 的值,

flex-direction:column; 主轴为垂直方向的

flex-direction:row ; 主轴为水平方向

一旦确定主轴的方向后,

justify-content 指的是主轴方向的排布,

algin-items 指的是 交叉轴方向的 对齐方式

对于reverse作用后的主轴和交叉轴的方向示例

baseline与stretch:baseline子元素文字底线作为基线对其(参考第一个子元素对其),stretch交叉轴的拉伸(没有指定高度的情况下)

 flex-wrap与消除间距:产生换行效果,

flex换行默认的特性:产生间距 设置容器高度为两倍间距高度,巧妙消除间距

相关文章

  • css flex布局详解

    css flex布局详解 css flex布局详解1css flex布局详解2

  • 关于CSS - flex

    flex container 弹性容器flex item 弹性盒子 flex容器将消除item的块状特性: fle...

  • 发现•分享—2019-01-10~2019-01-13

    工具 webpack-hot-middleware解读 文章 CSS 关于css字体 flex布局小游戏 11个超...

  • html编程技巧

    字体外部描边 Css 基于flex布局的盒子上下居中 Css 基于flex布局的盒子左右居中 Css 基于flex...

  • div布局浮动与定位,定位 工具包

    &关于浮动定位 定位与浮动 &css3 阴影,变形,圆角,渐变色 自动生成 &Flex布局学习 flex布局 &自...

  • flex布局

    /*! https://github.com/lzxb/flex.css */ [flex], [flex] > ...

  • 小程序CSS知识点

    一、flex布局Flex 布局教程:语法篇Flex 布局教程:实例篇 二、CSS position 属性总结CSS...

  • css flex

    css flex布局 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称“容器...

  • flex.css:移动端 flex 布局

    flex.css 快速布局 什么是 flex.css css3 flex 布局相信很多人已经听说过甚至已经在开发中...

  • [CSS]关于Flex布局

    现在跨平台的js+native的框架在手机应用中越来越流行,例如facebook的reactnative框架和阿里...

网友评论

      本文标题:关于CSS - flex

      本文链接:https://www.haomeiwen.com/subject/mmzfaftx.html