New site, grid, flex, flexbox, design and what to choose. How to do it?

[LeonLatex]

Will flex and flexbox mean the same as setting up the web page with X number of DIV boxes and then controlling them with CSS3. So, if you imagine that the DIV boxes are parallel both vertically and horizontally (like making a grid), they will be adjusted with CSS and form the intended and planned design. Because then you probably also want to make the DIV boxes different in position and size.

Is there something here that I am wrong with my assumptions? Is this partly the intention/principle of the flexbox?

Much of this I already know, but I need to have it confirmed, because what I read online and in books are so different. It is possible that I am misunderstanding because bad English etc, but a confirmation of what is right and correction of what is wrong would be nice.

I have read the PHP documentation as sugested to.

[Strider64]

This is how I do my page layouts - I start off with grids

/* Approximately the size of a 1248px large display monitor */
@supports (grid-area: auto) {
  @media screen and (min-width: 78em) {
    .name-website {
      display: block;
    }
    .site {
      display: grid;
      grid-template-columns: 78em;
      grid-template-areas:
				"nav"
				"main"
                "sidebar"
				"footer";
      column-gap: 1.250em;
      justify-content: center;
    }
    
    // More CSS 

then I use flex for individual sections or elements

        #file_grid_area {
          grid-area: file_grid_area;
          display: flex;
          box-sizing: border-box;
          background-color: darken(#8ebd94, 0.20);
          padding: 1.250em 1.250em 0;
          [type="file"] {
            border: 0;
            clip: rect(0, 0, 0, 0);
            height: 1px;
            overflow: hidden;
            padding: 0;
            position: absolute !important;
            white-space: nowrap;
            width: 1px;
          }
          [type="file"] + label {
            background-color: #000;
            border-radius: 4rem;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            padding: 0.625em 1.250em;
            margin-bottom: 1.25em;
          }
        }

along with media queries

/* Approximately the size of a 1248px large display monitor */
@supports (grid-area: auto) {
  @media screen and (min-width: 78em) {

that way it's easy to changing the layout without to much modification to the HTML (If at all) and making too much changes to the CSS. I have also found that i don't write that much CSS or repetitive CSS.

 

Hope that Helps.

 

I use SASS (A CSS Preprosser)

Edited June 7, 2023 by Strider64

[gizmola]

You can frequently achieve the same layout with flexbox or grid.  If you are looking to implement a true grid, then grid is better suited to that.  

I feel like I have suggested this to you before, but this video does an excellent job showing the differences and suggesting when to use one vs the other.