zoukankan      html  css  js  c++  java
  • flex布局/弹性盒子

    在父层设置display:flex;和其它一些属性, 使直接子元素起一些排列布局的作用

    1. flex-direction: row | row-reverse | column | column-reverse  

      row:横向从左到右排列(左对齐),默认的排列方式。

      row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。

      column:纵向排列。

      column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。

    2.justify-content: flex-start | flex-end | center | space-between | space-around

      flex-start:弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放。

      flex-end:弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平齐摆放。

      center:弹性项目居中紧挨着填充。(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)。

      space-between:弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项,则该值等同于flex-start。否则,第1个弹性项的外边距和行的main-start边线对齐,而最后1个弹性项的外边距和行的main-end边线对齐,然后剩余的弹性项分布在该行上,相邻项目的间隔相等。

      space-around:弹性项目平均分布在该行上,两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项,则该值等同于center。否则,弹性项目沿该行分布,且彼此间隔相等(比如是20px),同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px)。

           <style>
                    .flexbox{
                        display:flex; 
                justify-content:space-between; border:1px solid #ccc; } .flex-item{width:100px;height:100px;background-color:#059;} </style> <div class="flexbox"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> </div>
  • 相关阅读:
    解决执行maven项目出现 SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder”. error
    linux yum命令详解
    解决 jenkins 下使用 HTML Publisher 插件后查看 html 报告显示不正常
    Centos6.5上安装sonarqube6.7.6
    Linux下解决高并发socket最大连接数限制,tcp默认1024个连接
    Linux 系统下安装 mysql5.7.25(glibc版)
    高版本sonar安装遇到的坑-sonar 6.7.5
    接口自动化测试框架 :APIAutoTest框架
    Netstat 的 10 个基本用法
    互联网测试开发面试题集锦(二)
  • 原文地址:https://www.cnblogs.com/luhailin/p/6667606.html
Copyright © 2011-2022 走看看