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),总是士兵的自由是很大的。

  • 相关阅读:
    Find the most frequent element in all intervals
    1365. How Many Numbers Are Smaller Than the Current Number
    CodeForces 1316C
    CodeForces-1305D Kuroni and the Celebration【树】
    CodeForces-1305C Kuroni and Impossible Calculation【思维】
    CodeForces 1254D Tree Queries【树链剖分+树状数组】
    Scout YYF I POJ
    CodeForces-1320C World of Darkraft: Battle for Azathoth 【权值线段树+思维】
    主席树总结
    Codeforces 1320A Journey Planning【思维转换】
  • 原文地址:https://www.cnblogs.com/baihuatian/p/12051268.html
Copyright © 2011-2022 走看看