zoukankan      html  css  js  c++  java
  • 弹性盒模型

    弹性盒模型

    在容器上设置样式:(给父元素设置的样式)

    display:flex;(这是打开弹性盒子模型的开关)

    flex-direction 容器内元素的排列方向(默认横向排列)、属性值:row(默认值、沿水平主轴让元素从左向右排列) | row-reverse(沿水平主轴让元素从右向左排列) | column(让元素沿垂直主轴从上到下垂直排列) |column-reverse(让元素沿垂直主轴从下到上垂直排列)

    flex-wrap(容器内元素的换行)1:flex-wrap: nowrap; (默认)元素不换行,比如:一个div宽度100%,设置此属性,2个div宽度就自动变成各50%;
    2:flex-wrap: wrap; 元素换行,比如:一个div宽度100%,设置此属性,第二个div就在第二行了;

    justify-content  元素在主轴(页面)上的排列

    center(元素在主轴上的居中排列)

    flex-start   元素在主轴页面上由左或者上开始排列

    flex-end    元素在主轴页面上由右或者下开始排列

    space-between  元素在主轴页面上左右两端或者上下 两端开始排列

    space-around   每个元素两侧的间隔相等,所以,元素之间的间隔比元素与边框的间隔大一倍

    align-items  元素在主轴页面当前行的纵轴(横轴)方向上的对齐方式

    align-items : flex-start; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界(靠上对齐)。

    align-items : flex-end; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。(靠下对齐)

    align-items : center; 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(居中对齐)

    align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。(靠上对齐)

  • 相关阅读:
    20170228 Z_po_send_email
    MRP 流程
    MRP 中的数据元素
    笔记:使用 Protel 99 SE 改一块车充 PCB
    PCB 锣板和半孔工艺的差别
    笔记:LIR2032 电池充电记录
    笔记:开源协议 Apache 2 和 GPL 兼容
    FastAdmin 在 CRUD 时出现 exec() has been disabled for security reasons 怎么办?
    FastAdmin 学习线路 (2018-09-09 增加 Layer 组件)
    记录一下变压器的焊盘问题
  • 原文地址:https://www.cnblogs.com/bigbang66/p/14005916.html
Copyright © 2011-2022 走看看