zoukankan      html  css  js  c++  java
  • Flex弹性布局

    1、Flex=Flexible Box的缩写,采用flex布局的元素,称为flex容器;它的所有子元素自动成为容器成员,称为flex项目(flex item)。设置容器属性display:flex。

    2、属性

    容器属性flex-flow: flex-direction  flex-wrap
      flex-direction: row || row-reverse || column || column-reverse(设置主轴方向,即子元素的排列方向)
    
      flex-wrap: nowrap || wrap || wrap-reverse(是否换行)
    容器属性justify-content: flex-start || flex-end || center || space-between || space-around(子元素在主轴方向的排列方式)
    容器属性align-items: flex-start || flex-end || center || stretch(默认值) || baseline,
      对于默认值stretch,如果子元素没有设置高度或者auto,则被拉伸占整个容器高度或宽度
    项目属性fiex: flex-grow || flex-shrink || flex-basis  (用于处理容器剩余空间)
      flex-grow: 默认值是0,用于扩展子元素的宽度,设置当前子元素应该占据剩余空间的比例,
      该比例 = (该子元素的flex-grow值)除以(所有兄弟元素的flex-grow值之和);
      flex-shrink:默认值为1,当空间不足时,子元素将缩小。
    项目属性align-self:属性值与align-items相同,设置单个子元素在交叉轴的排列方式。

      

  • 相关阅读:
    mvc与springmvc
    mybatis一级与二级缓存详解
    resultType和resultMap的使用场景
    mybatis第一天学习总结
    linux常用命令(不断更新)
    SSH基本框架搭建的详细过程
    hibernate多条件组合查询的两种方式
    AJAX验证用户名是否被注册
    Vimrc
    关于window.open在不同浏览器的不同点
  • 原文地址:https://www.cnblogs.com/minyDong/p/13022108.html
Copyright © 2011-2022 走看看