Sign in Registration
ArticlesDownloadServicesAudioContacts
ruen

How to use CSS flex at a glance

Typically, page layout uses property display - it helps to make the element display the way you want. It has a lot of possible values, and not so long ago new values ​​were added that allow you to typeset pages in a completely different way. One such value is flex .

css-flex-values

The job of this property is that the container will behave in a flexible way - it will stretch or contract in order to place the elements in the correct way. There is no longer any need to use the float property, since display : flex allows you to make the correct alignment not only horizontally, but also vertically, as well as perform other operations with elements. For this, new CSS properties have been added, they allow you to control the entire flex design - some properties apply to the main container, and others to the elements of this container.

What properties are there for the container ? List below:

What properties are there for container elements ? The calculation of the arrangement of elements inside the container in some cases also depends on the specified value for the container in which they are located. List below:

  • flex-grow - allows you to set the growth factor of an element when there is free space in the container, possible values ​​are set as numbers;
  • flex-shrink - allows you to set the shrink ratio of an item, the opposite of the above property, possible values ​​are set as numbers;
  • flex-basis - allows you to set the base width of the element, possible values: %, px, em , etc .;
  • flex is a shorthand for flex-grow, flex-shrink, flex-basis . Possible values ​​are appropriate, you can specify 1, 2 or 3 values ​​at once;
  • align-self - changes the align-items property only for a single element, possible values ​​are the same;
  • order - changes the order of an element in the general row, possible values ​​are set as numbers.

The article briefly reviewed how to use the flexibility of building blocks on a site page using the CSS flex technology, and also provided a list of properties with descriptions . This technology should be used with caution, only modern browsers support it.

Comments (0)
For commenting sign in or register.