CSS display omission

One line omitted display
white-space: nowrap; // The white-space property sets how to handle whitespace within an element. text-overflow: ellipsis; // The text-overflow attribute specifies what happens when text overflows containing elements. overflow: hidden; // The property specifies what happens when content overflows the element box.Copy the code
Multiple lines are displayed elliptically
display: -webkit-box; // Attribute specifies the type of box the element should generate -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;Copy the code

Flex Layout Parsing

Flex Flexible Box is a Flexible layout for CSS3. After setting flex layout, float, clear, vartical-align attributes of child elements are invalid.

Flex parent container properties
  1. Flex-direction // Horizontal layout direction
  2. Flex-wrap // Determines whether and how to wrap the layout outside the main direction
  3. Flex-flow // is an abbreviation for the Flex-direction and flex-wrap properties. The default is row nowrap
  4. Context-content specifies the alignment of the main axis (horizontal axis)
  5. Align-items // Alignment of the side axis (vertical axis)
  6. align-content //
Flex child container properties
  1. Order // Order of child elements, default is 0, small before large
  2. Flex-grow // Child element scaling, default is 0
  3. Flex-shrink // The default is 1
  4. Flex -basis // Allocates excess space to the child element. Default is auto
  5. Flex // short for properties 2, 3, 4, default 0 1 auto
  6. align-self //
conclusion
<div id="app"> <div class="itemContainer"> </div> <div class="item"></div> </div> <div class="itemContainer"> <div class="item"></div> <div class="item"></div> </div> </div> #app{ display: flex; flex-direction: row; margin: 0 auto; width: 100%; .itemContainer{ flex-direction: column; width: 50%; .item{ background: #f4f4f4; margin-bottom: 10px; }}}Copy the code