The first thing that I needed to do in this project was to change the display to either inline or inline-flex depending on the element. The container of the to do list needed to be inline-flex so that the to do list section and the reminder section could sit side by side. The rows withing the to do list needed to be flex so that they could sit side by side within the week container.

    .container {
        display: inline-flex;
    }
    .row {
        display: flex;
    }
            

The next adaptation that I did was to let the week section and the remainder section to grow if the app was to be made bigger so that they fill the size of the screen.

    .week {
        flex-grow: 3;
    }
    .reminders {
        flex-grow: 2;
    }
            

Currently all the rows are on a single row, I want each day of the week to be under each other, so I used a flex-direction to change the direaction to a column.

    .week {
        flex-direction: column;
    }
            

I then wanted to get the boxes in the row to wrap to the next line if the screen was too small to fit them inline with each other.

    .row {
        flex-wrap: wrap;
    }
            

After wrapping the text, I realised that the boxes weren't in the correct position on the main axis, so I used justify-content to centralise the items. Additionally, I used the justify-content to add some space around the items within the row.

I find when I first started learning CSS, I often make a mistake when centering anything or changing the colour as I kept spelling everything in British English as apposed to American English. But I'm happy to say these mistakes are getting fewer and farther between.

    .square {
        justify-content: center;
    }
    .row {
        justify-content: space-around;
    }
            

My final step on this project is to align the items along the cross axis, to do this I used align-items on the row and square class.

    .row {
        align-items: center;
    }
    .square {
        align-items: center;
    }
            

Overall, I really enjoyed doing this mini project and getting a better understanding of how useful Flexbox is on websites. I am looking forward to continuing my Full Stack Career course and seeing what else I will be able to apply to future websites.

Throughout this project I used:

display:
1. inline-flex
2. flex
justify-content:
1. center
2. space-around
align-items:
1. center
flex-grow:
1. 2
2. 3
flex-direction:
1. column
flex-wrap:
1. wrap