Jump to content

Another CSS Flexbox Question


ahr aitch

Recommended Posts

The attached screenshot is taken from one of the CSS Flexbox tutorial pages.  I have several questions.

  1. I 'think' that the first .flex-container CSS group defines the container and the second one - with the "> div" syntax - defines the items in the container.  Is that correct?
  2. Is ".flex-container" a reserved word that must be used to identify a container to browsers, or can any term be used, especially one that might be more meaningful in some circumstances?  It's my understanding that "display:flex" are reserved words and that this is what defines the container, not the style class name.  Am I wrong?
  3. This ss comes from the lesson on "align items."  The example confuses me.  I understand the lesson to mean that the flex items will be center-aligned; yet the example shows them left-aligned.  Yes, the boxes are aligned to the center vertically, but context makes me believe that they are supposed to be centered horizontally.  Because the flex items  are not centered horizontally, I have to ask if it is possible to center align them horizontally and, if so, how?
  4. I put a box around the container CSS definition at upper left.  There is no width definition, only a height definition.  Can the size of the container be defined using both width and height?  The example doesn't make it clear for me.
  5. In the flex items declaration I circled in blue the "text-align: center" statement.  I believe it is this statement that causes the numbers in the flex items to be centered in the white space.  Do I understand this correctly?

W3c Flexbox 2 2023-09-16_17h39_26.png

Link to comment
Share on other sites

I answered the first one in your other thread. It selects items inside the container.

.flex-container is a class selector. It selects any element where which has class="flex-container" as an attribute. You could replace "flex-container" with anything you like. The information about the class selector is on this page: https://www.w3schools.com/css/css_selectors.asp

align-items centers them vertically. If you want horizontal centering you can use justify-content. Here's a reference page for justify-content: https://www.w3schools.com/cssref/css3_pr_justify-content.php

When you don't set the width of an element it automatically fills the entire width available. You can give it a width but in most cases this standard behavior is desirable.

Yes, the numbers are text and they're centered horizontally due to the text-align property.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...