CSS spacing issue with flex display

Question

I am new to CSS and not quite sure how to do spacing. Currently I have tried to center 5 wheels on the page like this:

The CSS is

body{
    padding: 0px;
    margin: 0px;
}
#wheels{
    display: flex;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: stretch;
    width: 100%
}    
#wheel1, #wheel2, #wheel3, #wheel4, #wheel5, canvas{
    flex-grow: 1;
    margin: 0;
    padding: 0;
} 

canvas{
width: 100%;
}

I already have margin 0 and padding 0. I need to reduce the spacing between the wheels so that they will display bigger. Not sure about how to do this. Any help is appreciated.

EDITED:

The program is based on javascript. It is related to my other issue. But we were not able to do the spacing properly.

Complete code:

Damzaky · Accepted Answer

Ok so I checked your code, the issue here is not the CSS, but it's that the spacing were determined by the width and height of the gameConfig, since the image size is 458px the size of the image inside of the canvas will be 458/600px, thus causes the spacing. What you could do is, change the 600px width to smaller value (no need to change the height though), e.g. 500px will make the image size 458/500px which will leave a 42px margin around the wheel. What you could do though, change the width from 600 to just 458 (size of the wheel image), then use CSS for the spacings.

By the way I could not reproduce your code because it seems like phaser needs the assets to be loaded locally and I couldn't add those images to be the same origin as stackoverflow domain, so I will just post code here:

Javascript:

// the game itself
var game;

var gameOptions = {

    // slices (prizes) placed in the wheel
    slices: 8,

    // prize names, starting from 12 o'clock going clockwise
    slicePrizes: ["A KEY!!!", "50 STARS", "500 STARS", "BAD LUCK!!!", "200 STARS", "100 STARS", "150 STARS", "BAD LUCK!!!"],

    // wheel rotation duration, in milliseconds
    rotationTime: 3000
}

var gameConfig;
// once the window loads...
window.onload = function () {
gameConfig = {
    type: Phaser.CANVAS,
    parent: 'wheel1',
    width: 458,
    height: 600,
    backgroundColor: 0xffffff,
    scene: [playGame]
};

var game = new Phaser.Game(gameConfig);

game.scene.start('PlayGame', { degrees: 50 });


gameConfig = {
    type: Phaser.CANVAS,
    parent: 'wheel2',
    width: 458,
    height: 600,
    backgroundColor: 0xffffff,
    scene: [playGame]
};

var game2 = new Phaser.Game(gameConfig);

game2.scene.start('PlayGame', { degrees:100 });


gameConfig = {
    type: Phaser.CANVAS,
    parent: 'wheel3',
    width: 458,
    height: 600,
    backgroundColor: 0xffffff,
    scene: [playGame]
};

var game3 = new Phaser.Game(gameConfig);

game3.scene.start('PlayGame', { degrees: 150 });


gameConfig = {
    type: Phaser.CANVAS,
    parent: 'wheel4',
    width: 458,
    height: 600,
    backgroundColor: 0xffffff,
    scene: [playGame]
};

var game4 = new Phaser.Game(gameConfig);

game4.scene.start('PlayGame', { degrees: 250 });


gameConfig = {
    type: Phaser.CANVAS,
    parent: 'wheel5',
    width: 458,
    height: 600,
    backgroundColor: 0xffffff,
    scene: [playGame]
};

var game5 = new Phaser.Game(gameConfig);

game5.scene.start('PlayGame', { degrees: 300 });

}

// PlayGame scene
class playGame extends Phaser.Scene {

    // constructor
    constructor() {
        super({ key: "PlayGame" });
    }

    // method to be executed when the scene preloads
    preload() {

        //loading assets
        this.load.image("wheel", "wheel.png");
        this.load.image("pin", "pin.png");
    }

    // method to be executed once the scene has been created
    create(data) {

        // adding the wheel in the middle of the canvas
        this.wheel = this.add.sprite(gameConfig.width / 2, gameConfig.height / 2, "wheel");

        // adding the pin in the middle of the canvas
        this.pin = this.add.sprite(gameConfig.width / 2, gameConfig.height / 2, "pin");

        // adding the text field
        this.prizeText = this.add.text(gameConfig.width / 2, gameConfig.height - 20, "Spin the wheel", {
            font: "bold 32px Arial",
            align: "center",
            color: "black"
        });

        // center the text
        this.prizeText.setOrigin(0.5);

        // the game has just started = we can spin the wheel
        this.canSpin = true;

        //this.input.on("pointerdown", this.spinWheel, this);
        this.spinWheel(data.degrees);
    }

    // function to spin the wheel
    spinWheel(degrees) {

        // can we spin the wheel?
        if (this.canSpin) {

            // resetting text field
            this.prizeText.setText("");

            // the wheel will spin round from 2 to 4 times. This is just coreography
            var rounds = Phaser.Math.Between(8, 10);

            // var degrees = Phaser.Math.Between(0, 360);
            var prize = gameOptions.slices - 1 - Math.floor(degrees / (360 / gameOptions.slices));

            // now the wheel cannot spin because it's already spinning
            this.canSpin = false;

            // animation tweeen for the spin: duration 3s, will rotate by (360 * rounds + degrees) degrees
            // the quadratic easing will simulate friction
            this.tweens.add({

                // adding the wheel to tween targets
                targets: [this.wheel],

                // angle destination
                angle: 360 * rounds + degrees,

                // tween duration
                duration: gameOptions.rotationTime,

                // tween easing
                ease: "Cubic.easeOut",

                // callback scope
                callbackScope: this,

                // function to be executed once the tween has been completed
                onComplete: function (tween) {

                    // displaying prize text
                    this.prizeText.setText(gameOptions.slicePrizes[prize]);

                    // player can spin again
                    this.canSpin = true;
                }
            });
        }
    }
}

CSS:

#wheel1, #wheel2, #wheel3, #wheel4, #wheel5 {
    flex-grow: 1;
    margin: 0;
    padding: 10px;
}

On the CSS, notice where I remove canvas from it and added padding 10px which you can adjust.

These will result in:

CSS spacing issue with flex display

Answers (2)

Related Questions