Home > Web Front-end > CSS Tutorial > What attributes does container have in css?

What attributes does container have in css?

下次还敢
Release: 2024-04-28 14:36:18
Original
698 people have browsed it

The container attribute defines the container element in CSS, allowing control of its size, layout and content arrangement: size and position: width, height, margin, padding. Layout: display (inline, block, flex, grid). flex-direction(row,column). justify-content(start, end, center). align-items(start, end, center). Content arrangement: text-align (left, center, right), vertical-align (t

What attributes does container have in css?

container’s attributes in CSS

container is an attribute used in CSS to define a container element, which allows developers to control its size, layout and content arrangement

Size and position

  • ##width: Defines the width of the container.
  • ##height:
  • Defines the height of the container. : Defines the spacing between the container and surrounding elements.
  • padding: Defines the spacing between the inner elements of the container and the edge of the container. Layout
  • ##display:
  • Specifies how the container displays its child elements. It can be set to the following values:

inline: Child elements are arranged horizontally.

block: Child elements are arranged vertically.
  • flex: Use the flexible box model to lay out child elements.

    grid: Use grid layout to lay out child elements.

    • ##flex-direction:
    • Specifies the arrangement direction of child elements in the flex box model. It can be set to the following values:
    • row: Horizontal arrangement.
    • column: Vertical arrangement.
  • justify-content: Specifies the child elements in the elastic box model. Alignment on the main axis. It can be set to the following values:

    • start: left (for row arrangement) or top (for column arrangement)
    • ##end: right. Align (for row arrangement) or bottom (for column arrangement)
    • center:
  • ##align-items:##. # Specify the alignment of child elements on the cross axis in the flexbox model. It can be set to the following values:

    start: top alignment (for row arrangement) or left alignment (for column arrangement). .

      end: bottom alignment (for row arrangement) or right alignment (for column arrangement).
    • #Content alignment
  • ##text-align: Specifies the alignment of text in the container. It can be set to the following values:

      left: left alignment.
    • center: center alignment.
    • right: right alignment.

vertical-align: Specifies the vertical alignment of elements in the container. It can be set to the following values:

    top: Top alignment.
  • middle: Center aligned. bottom: bottom alignment.

The above is the detailed content of What attributes does container have in css?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template