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

    在css样式设计中有一个弹性盒属性,那什么是弹性盒呢?简单来说就是可以根据某些子元素设置的宽度或者是高度来自动为其他的子元素设置宽度和高度。

    那么怎么将元素设置为弹性盒呢,答案就是将display:flex;样式设置在父元素上,记住是父元素上;

    之后我们就要分配父元素剩余的空间了。我们就要将-(相应的浏览器内核)-flex-grow:整数;设置在子元素上了(整数表示占父类剩余空间的份数);

    我 们还要设置主轴的方向了(设置在父元素上),我们要将-(相应的浏览器内核)-flex-direction:方向;设置在父元素上。主轴方向默认为 row(从左到右),row-reverse(从右到左),column(从上到下),column-reverse(从下到上);

    设置子元素在侧轴上的对齐方式(父元素上),-(相应的浏览器内核)-align-items:位置;位置有三种,分别是flex-start(侧轴的起始),center(居中),flex-end(侧轴的结束位置);

    设 置子元素在主轴上的对齐方式(父元素上),-(相应的浏览器内核)-justify-content:对齐方式;对齐方式有五种,分别是flex- start(主轴起始位置),flex-end(主轴的结束位置),center(居中),space-around:子元素与两端的距离是子元素与子元 素距离的一半,space-between:子元素与两端的距离是0;

    通过上面的讲解大家应该对什么是弹性盒了解了吧

  • 相关阅读:
    变长参数表
    以二进制方式输出数字在内存中的存储形式
    asp.net mvc controller 获取数据
    asp.net mvc 3.0 新特性之 Model
    一个实体对象不能由多个 IEntityChangeTracker 实例引用
    iis6.0运行asp请求资源正在使用中
    view的使用
    asp.net mvc RenderAction 和RenderPartial用法
    今天
    当下的力量
  • 原文地址:https://www.cnblogs.com/Z-Xin/p/6986128.html
Copyright © 2011-2022 走看看