ahr aitch Posted September 16, 2023 Share Posted September 16, 2023 The attached screenshot is taken from one of the CSS Flexbox tutorial pages. I have several questions. 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? 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? 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? 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. 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? Link to comment Share on other sites More sharing options...
Ingolme Posted September 16, 2023 Share Posted September 16, 2023 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 More sharing options...
ahr aitch Posted September 17, 2023 Author Share Posted September 17, 2023 Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now