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

    主要是两个对象:设置为弹性盒的大盒子,和包裹在弹性盒里面的小盒子,类似于排列布阵,我使用排兵布阵的方式来做比喻

    对于大将军:首先,最最重要的是先有个名分    display:flex;    

    成功当上大将军之后,就可以沙场排兵布阵了

    此时十多个士兵在一个长宽分别可以站六个人的场地内

    他们站成一排,超过了场地的范围,因此作为大将军,可以下达指令    flex-wrap   来命令他们换行

    这个指令有三个选项:

    一是nowrap:这就是初始的默认值,就是这个指令导致了他们超出了场地

    二是wrap:可以让超出范围的士兵排到第二排

    三是wrap-reverse:如果第一排的士兵个子较高,就可以让第一排站到后面去,场地外的四个士兵站到第一排。

    不论是第二种还是第三种,此时有两排是个士兵排列在你的面前。

    有一行只有四个人!!!!!

    是时候行驶将军的特权了,我可以让他们靠左边站(jusitify-content:flex-start),我可以让他们靠右边站(jusitify-content:flex-end),我可以让他们站在正中心(jusitify-content:center),我可以让他们等间距站(jusitify-content:space-between),我还可以让他们离两边有一定的距离,但是中间部分等分站,玩弄小士兵就很有趣嘛。

    我可以让这四个人靠左边站(flex-direction:flex-start),靠右边逆序站(flex-direction:flex-end),从上到下(flex-direction:column),从下到上(flex-direction:column-reverse)

    对于这四个人,我还可以让他们在脚底下垫石头让他们看起来一样高(align-items:flex-start),或者高低不一(align-items:flex-end),或者是从腰部对齐(center),或者是从他们胸前写的那个卒字对齐(align-items:baseline)。不一而足


    对于这四个人自己,他们也有对应的标识(order),数字越大则地位越高,站的位置越靠前,每个人还有权利决定自己和其他人的不同之处(align-self),还可以决定自己所占空间的大小(flex),总是士兵的自由是很大的。

  • 相关阅读:
    BZOJ1040: [ZJOI2008]骑士
    Codeforces 849D.Rooter's Song
    POJ4852 Ants
    NOIP模拟赛 17.10.10
    Codeforces 851D Arpa and a list of numbers
    BZOJ2529: [Poi2011]Sticks
    BZOJ1826: [JSOI2010]缓存交换
    POJ3579 Median
    codevs1214 线段覆盖
    POJ2230 Watchcow
  • 原文地址:https://www.cnblogs.com/baihuatian/p/12051268.html
Copyright © 2011-2022 走看看