This article describes the layout style in Ant Cube Card.
Flexbox
The layout model for cards is based on CSS Flexbox, which is a one-dimensional layout model that enables the layout of all page elements to be consistent and predictable, while the layout adapts to various devices or screen sizes.
Flex container
In the card, Flexbox is the only layout model. You must set display:flex. If a card element can nest to hold other elements, then it becomes a Flex container.
Property | Description | Data type | Default value | Valid value | Writing | Remarks |
display | flex layout | string | flex | flex | display:flex | The specified node needs to be displayed as a flex layout. |
The difference with the Web lies in the text node calculation. That is, in the card, the size of the text node will not be greater than the size of its parent node.
Property | Description | Data type | Default value | Valid value | Writing | Remarks |
flex-wrap | Determines whether flex member items are distributed on one line or on multiple lines. | string | nowrap | wrap and nowrap | flex-wrap:wrap; | |
flex-direction | Defines the direction in which flex member items are arranged. | string | column | column, row, row-reverse, column-reverse | flex-direction:row; | |
align-items | Defines how flex member items are arranged along the vertical axis to handle white space. | string | stretch | stretch, center, flex-start, flex-end, and baseline | align-items:center; | |
align-content | Defines how flex member items allocate space between and around content items along the vertical axis. | string | flex-start(web: stretch) | auto, stretch, center, flex-start, and flex-end | align-content:center; | flex-wrap: invalid when it is nowrap. |
justify-content | Defines how flex member items are arranged in the primary axis direction to handle white space. | string | flex-stat | flex-start, flex-end, center, space-between, and space-around | justify-content:center; |
Flex members
The differences with the Web are:
Text node calculation: If width and height are not set, the text node in the card is used as the node for external size calculation in yoga calculation, and the calculation result will be adjusted again according to the flex constraint. However, the text node in the web calculates the size according to the content and is not restricted by the flex condition.
Flex-basis difference: when width and height are not set, after flex-basis is set in the card, the flex-basis value will be used as the initial value to participate in the flex style calculation, and the actual size of the content will not be considered. However, in the Web, flex constraints are not considered, and the actual size of the content is used for layout.
Property | Description | Data type | Default value | Valid value | Writing | Remarks |
flex | Defines how much flex member items can occupy the remaining space in the container. | Length unit or percentage | 0 | flex:1; flex:1 1 30px; | The abbreviation flex: <flex-grow> | <flex-shrink> | <'flex-basis> is supported. | |
flex-grow | Defines the scale at which flex member items stretch when there is free space left. | Length Unit | 0 | flex-grow: 1; | ||
flex-shrink | Defines the ability to shrink flex member items. | Length Unit | 0(web:1) | flex-shrink: 1; | ||
flex-basis | Defines the default size of flex member items before the remaining space is allocated. | Length unit or percentage | auto | auto, pixel value, percentage | flex-basis: auto; flex-basis: 50px; flex-basis: 30%; | |
align-self | Allows a single flex member item to override the default alignment. | string | auto | auto, center, stretch, flex-start, and flex-end | align-self:flex-start; |
Position
Support position. After the position property specifies the positioning type of the element, you can set the coordinates by using the top, bottom, left, and right properties.
Property | Description | Data type | Default value | Valid value | Writing |
position | Positioning type | string | relative | relative, absolute, and fixed | position: fixed; |
top | Offset above distance | Length unit or percentage | 0 | top: 10px; | |
bottom | Offset below distance | Length unit or percentage | 0 | bottom: 10px; | |
left | Offset from left | Length unit or percentage | 0 | left: 10px; | |
right | Offset to the right | Length unit or percentage | 0 | right: 10px; |
Others
Property | Description | Data type | Default value | Valid value | Writing |
overflow | Controls whether content is clipped when it overflows the element's box | string | visible | visible,hidden | overflow:hidden; |
visibility | Specifies whether an element is visible | string | visible | visible,hidden | visibility:hidden; |
Basic flexbox usage
Here is an example of a basic use of Flexbox.
When you use the shorthand mode of a property, the styles that are not written in the shorthand will be processed as the default values.
When a shorthand for an attribute exists at the same time as a non-shorthand, the principle that the latter overrides the former is followed.
.flex-container {
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
flex-direciton: row;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
<div class="flex-container">
<text class="flex-item">flex item 1</text>
<text class="flex-item">flex item 2</text>
<text class="flex-item">flex item 3</text>
</div>
Example code
Click here detailFlex.zip for the complete example code.