Tag:principal axis

  • Flex elastic box

    Time:2020-5-20

    How to turn on Flex <style> /*Parent on*/ div { display: flex; } /*Subitem*/ div span { width: 150px; height: 100px; background-color: red; } </style> <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body> Flex layout parent common properties attribute explain flex-direction Set spindle direction justify-content Set the arrangement of sub elements on the spindle flex-wrap Set […]

  • CSS3 elastic box

    Time:2020-4-6

    Some knowledge of elastic box model 1、 Brief introduction Flexible box model (flexible box or flexbox) is a new layout module of CSS3, which is officially called CSS flexible box layout module. It is used to realize the alignment, direction, sorting (even in the case of project size, position and dynamic generation) of items in […]

  • Flex web page layout CSS flexible expansion box syntax tutorial

    Time:2020-3-17

    Layout is a key application of CSS. The traditional solution of layout is based on box model, which depends on display attribute + position attribute + float attribute. It is very inconvenient for special layout, for example, vertical center is not easy to achieve. In 2009, W3C put forward a new scheme, flex layout, which […]

  • On the application of flex layout

    Time:2020-3-2

    What is flex layout? Flex is the abbreviation of flexible box, which means “flexible layout”. Any container can be specified as flex layout What is the basic concept of flex? Flex layout elements, known as flex containers, are referred to as containers. All its child elements automatically become container elements, referred to as “project“. The […]

  • Flex layout

    Time:2020-2-24

    display:flex;flex-direction:row; //culomnJustify content: // set the space between space aroundJustify content sets the alignment of elements on the main axisAlign-item sets the alignment of elements on the vertical axis.Note: setting justify content: Center; align item: Center; can realize horizontal and vertical centering of elements. https://www.cnblogs.com/qcloud1001/p/9848619.htmlFlex for left page alignmentCSS unit Daquan

  • How to control the proportion of flex subelements on the spindle

    Time:2019-11-22

    background Flex layout is more effective to achieve alignment and space allocation. Recently, I learned the size calculation rules of flex sub elements, mainlyflex-grow, flex-shrinkThe learning of calculation rules. I. Basic Concepts 1.1 main axis The beginning and direction of the layout of flex elements are defined, and the flex sub elements are placed on […]

  • Flutter learning notes (23) — layout widget of multiple sub elements (rwo, column, stack, indexedstack, table, wrap)

    Time:2019-11-9

    For reprint, please indicate the source:Flutter learning notes (23) — layout widget of multiple sub elements (rwo, column, stack, indexedstack, table, wrap)   In the previous article, I combed the widgets with a single sub element layout. Today, I combed the widgets with multiple sub element layouts. Row Common properties of row component are as […]